We Keep Coding

Alternative to "onChange" event with Semantic UI dropdown?

This is a dumb question but I've been all over the Semantic UI site, along with searching here and I haven't found a solution.
The gist is: I have been using the code below with a Semantic dropdown list. It works fine – except that I have a table component through which the user can also make a selection (which triggers a function) – and when they do, I update the Semantic dropdown to reflect the current selection . . . and then the onChange event fires – so a function is running twice when it doesn't need to.
I tried using onSelect but that is apparently not a valid event for a dropdown. I could do some stupid hack to work around this but I'd rather just use a different event. Is there one?
$(function () {
$('#productStates').dropdown({
allowAdditions: true,
allowReselection: true,
placeholder: "Select State",
onChange: function (value, text) {
if (projectData == undefined) return;
loadStateByID(value)
}
})
});

Ok - solved this. Wish the Semantic docs were clearer on event handling.
I was trying to prevent a "loading" function from getting called twice when a user clicked on a table cell and the dropdown was updated to reflect the current selection. I update the dropdown using:
$('#productStates').dropdown('set selected', activeStateID);
The onChange event handler captured all changes and so the "load" event would fire twice. Using action, the event only fires on a user action, not on setting the dropdown state through code.
$('#productStates').dropdown({
allowAdditions: true,
allowReselection: true,
placeholder: "Select State",
action: function (value, text) {
if (projectData == undefined) return;
$(this).dropdown('set selected', value);
loadStateByID(text)
}
})

Semantic UI form onSuccess event isn't firing

I've made a form using semantic UI. The form validation works perfectly. But the onSuccess event isn't getting triggered when I click the submit button.
formValidationRules = {
//some rules
}
var formSettings = {
on: 'blur',
inline: true,
onSuccess : function() {
alert("success");
return true;
}
};
$(document).ready(function() {
$('.ui.form').form(formValidationRules, formSettings);
});
This is the example I find on all web searches. Any ideas?
The full form code is here.

As far as I know, you have to include all the settings in the same object, at least that's the way I do it. Try combining formValidationRules and formSettings.

jQuery autocomplete prevent focus after selection

Requirement:
I'd like a jQuery autocomplete element that allows the user to pick an item and set the display field and a hidden field with the selected value. But I would also like the field and the hidden field to be cleared when the input field receives focus by the user.
Problem:
The problem I'm facing is that when the user selects an item it's almost like jQuery is executing the onSelect function and then sending the focus to the input field again which fires my focus() event (and therefore clearing my selection).
Problem Browser:
IE8 , works in Chrome. Did not try others.
Attempted fixes:
I have tried setting the focus to another element in the select()
function. It did put the focus on that element but only after
focussing on the input field
Tried both event.preventDefault() and event.stopPropagation() in the
select() method. Did not work.
Blur didnt work either.
Workarounds:
I guess I can change the clearing to be on click instead of on focus, but this is not what I want.
Similar stackoverflow thread:
jquery autocomplete remove focus after suggest
Code:
Here is my code:
$(function () {
$("#autosuggest").autocomplete({
source: "my server path",
minLength: 3,
select: function (event, ui) {
if (ui.item) {
$("#autosuggest").val(ui.item.value);
$("#hidden").val(ui.item.id);
}
}
});
$("#autosuggest").focus(function () {
$("#hidden").val("");
this.value = "";
});
});

The problem is: when you click on an autocomplete suggestion, the focus shifts to that dropdown menu, ever so shortly, to return to your input afterwards. Do you still get this problem if you choose the autocomplete suggestion by using the arrow-down button? If you do not, then this is the problem.
The only way I can see to fix this is not to make it a focus event after all, but I think I know why you don't want to make it a click event: you also want to capture tabbing into the field.
Solution: make it a click handler, and add a 'keyup' handler that executes the click handler handler if the key was a tab (arrow-down etc are still allowed).

I got this from the jQuery forum and it works fabulous!
select: function(event, ui) {
$(event.target).autocomplete("close")
setTimeout(function() {
$(event.target).blur();
})
}
Link: https://forum.jquery.com/topic/autocomplete-input-field-stays-focused-after-selection

Try onSelect function..
$(function () {
$("#autosuggest").autocomplete({
source: "my server path",
minLength: 3,
select: function (event, ui) {
if (ui.item) {
$("#autosuggest").val(ui.item.value);
$("#hidden").val(ui.item.id);
}
},
onSelect: function (suggestion) {
$(this).click();}
});
$("#autosuggest").focus(function () {
$("#hidden").val("");
this.value = "";
});
});

jQuery UI autocomplete field not submitting when pressing enter

I'm following the Railscast on this topic, and although the autocomplete feature works, I am unable to get it to submit the form when the user selects an item and presses enter. I have this (coffeescript) code but it doesn't seem to work... can anyone see where I'm going wrong please?
jQuery ->
$('#search_bar').autocomplete(
source: $('#search_bar').data('autocomplete-source')
).keydown (e) ->
$('#search_button').trigger "submit" if e.keyCode is 13
Ideally I would like it to submit on selecting an item via a mouse click too - but not sure if that's possible?
Update: I've tried this...
jQuery ->
$('#search_bar').autocomplete
source: $('#search_bar').data('autocomplete-source'),
select: (event, ui) ->
$(this).parents("form").submit()
...and although it now works if you use the keyboard to select an item (and press enter), if you select an item via a mouse click it only sends the string that you had typed and not the complete word from the auto-complete drop-down. (I guess what I need is for the search field to be updated with the contents of the text on mouse-over?)
Update 2: Sorted! Just add this onto the end
focus: (event, ui) ->
$('#search_bar').val(ui.item.value)

Use the select event. documentation here The enter key is caught by autocomplete to close the menu and intentionally does not propagate. The select event will fire for both the enter key and mouse select. However when clicked the form will be submitted before the label has a chance to change, so have to set that value first. Depending on your data source you may want to use item.label instead of item.value.
$('#search_bar').autocomplete({
source: $('#search_bar').data('autocomplete-source'),
select: function(event, ui) {
$(this).val(ui.item.value);
$(this).parents("form").submit(); // this will submit the form.
}
})
I believe the coffeescript would look like this
$('#search_bar').autocomplete(
source: $('#search_bar').data('autocomplete-source'),
select: (event, ui) ->
$(this).val(ui.item.value).parents("form").submit();
)

Don't know much about coffee script, but this is how I would do it in javascript
http://jqueryui.com/demos/autocomplete/
You can use the 'select' event. When the user selects something, do your submit:
$( ".selector" ).autocomplete({
select: function(event, ui) {
$('#theForm').submit();
}
});
I am fairly certain this will take care of both cases for you. Both onEnter and onClick.

Any event triggered on autocomplete?

I have a pretty simple form. When the user types in an input field, I want to update what they've typed somewhere else on the page. This all works fine. I've bound the update to the keyup, change and click events.
The only problem is if you select an input from the browser's autocomplete box, it does not update. Is there any event that triggers when you select from autocomplete (it's apparently neither change nor click). Note that if you select from the autocomplete box and the blur the input field, the update will be triggered. I would like for it to be triggered as soon as the autocomplete .
See: http://jsfiddle.net/pYKKp/ (hopefully you have filled out a lot of forms in the past with an input named "email").
HTML:
<input name="email" />
<div id="whatever"><whatever></div>
CSS:
div {
float: right;
}
Script:
$("input").on('keyup change click', function () {
var v = $(this).val();
if (v) {
$("#whatever").text(v);
}
else {
$("#whatever").text('<whatever>');
}
});

I recommending using monitorEvents. It's a function provide by the javascript console in both web inspector and firebug that prints out all events that are generated by an element. Here's an example of how you'd use it:
monitorEvents($("input")[0]);
In your case, both Firefox and Opera generate an input event when the user selects an item from the autocomplete drop down. In IE7-8 a change event is produced after the user changes focus. The latest Chrome does generate a similar event.
A detailed browser compatibility chart can be found here:
https://developer.mozilla.org/en-US/docs/Web/Events/input

Here is an awesome solution.
$('html').bind('input', function() {
alert('test');
});
I tested with Chrome and Firefox and it will also work for other browsers.
I have tried a lot of events with many elements but only this is triggered when you select from autocomplete.
Hope it will save some one's time.

Add "blur". works in all browsers!
$("input").on('blur keyup change click', function () {

As Xavi explained, there's no a solution 100% cross-browser for that, so I created a trick on my own for that (5 steps to go on):
1. I need a couple of new arrays:
window.timeouts = new Array();
window.memo_values = new Array();
2. on focus on the input text I want to trigger (in your case "email", in my example "name") I set an Interval, for example using jQuery (not needed thought):
jQuery('#name').focus(function ()
{
var id = jQuery(this).attr('id');
window.timeouts[id] = setInterval('onChangeValue.call(document.getElementById("'+ id +'"), doSomething)', 500);
});
3. on blur I remove the interval: (always using jQuery not needed thought), and I verify if the value changed
jQuery('#name').blur(function ()
{
var id = jQuery(this).attr('id');
onChangeValue.call(document.getElementById(id), doSomething);
clearInterval(window.timeouts[id]);
delete window.timeouts[id];
});
4. Now, the main function which check changes is the following
function onChangeValue(callback)
{
if (window.memo_values[this.id] != this.value)
{
window.memo_values[this.id] = this.value;
if (callback instanceof Function)
{
callback.call(this);
}
else
{
eval( callback );
}
}
}
Important note: you can use "this" inside the above function, referring to your triggered input HTML element. An id must be specified in order to that function to work, and you can pass a function, or a function name or a string of command as a callback.
5. Finally you can do something when the input value is changed, even when a value is selected from a autocomplete dropdown list
function doSomething()
{
alert('got you! '+this.value);
}
Important note: again you use "this" inside the above function referring to the your triggered input HTML element.
WORKING FIDDLE!!!
I know it sounds complicated, but it isn't.
I prepared a working fiddle for you, the input to change is named "name" so if you ever entered your name in an online form you might have an autocomplete dropdown list of your browser to test.

Detecting autocomplete on form input with jQuery OR JAVASCRIPT
Using: Event input. To select (input or textarea) value suggestions
FOR EXAMPLE FOR JQUERY:
$(input).on('input', function() {
alert("Number selected ");
});
FOR EXAMPLE FOR JAVASCRIPT:
<input type="text" onInput="affiche(document.getElementById('something').text)" name="Somthing" />
This start ajax query ...

The only sure way is to use an interval.
Luca's answer is too complicated for me, so I created my own short version which hopefully will help someone (maybe even me from the future):
$input.on( 'focus', function(){
var intervalDuration = 1000, // ms
interval = setInterval( function(){
// do your tests here
// ..................
// when element loses focus, we stop checking:
if( ! $input.is( ':focus' ) ) clearInterval( interval );
}, intervalDuration );
} );
Tested on Chrome, Mozilla and even IE.

I've realised via monitorEvents that at least in Chrome the keyup event is fired before the autocomplete input event. On a normal keyboard input the sequence is keydown input keyup, so after the input.
What i did is then:
let myFun = ()=>{ ..do Something };
input.addEventListener('change', myFun );
//fallback in case change is not fired on autocomplete
let _k = null;
input.addEventListener( 'keydown', (e)=>_k=e.type );
input.addEventListener( 'keyup', (e)=>_k=e.type );
input.addEventListener( 'input', (e)=>{ if(_k === 'keyup') myFun();})
Needs to be checked with other browser, but that might be a way without intervals.

I don't think you need an event for this: this happens only once, and there is no good browser-wide support for this, as shown by #xavi 's answer.
Just add a function after loading the body that checks the fields once for any changes in the default value, or if it's just a matter of copying a certain value to another place, just copy it to make sure it is initialized properly.