jQuery: event that tracks click in browser autocomplete

I have a keyup event on an input. This event works fine for auto complete when you select a value and press enter. But it doesn't work when you click at an auto complete value.

Is there an event that i can use in such case?

I already tried the change one but it doesn't work.

Thanks!

Edit:

Maybe i was not clear but i am referring to the autocomplete feature that browsers have. I am not trying to build my own.

Example: I have the following event:

$('.product').keyup(searchByProduct);

When user clicks at this input the old values that he already typed shows up ( it's the browser that does this ). If he cli开发者_高级运维cks on one of the values, the function searchByProduct is not called.

Which event do i have to register to track this click ( and that the input content has changed )?

This jQuery listenForChange extension does what you're after - it basically keeps a copy of the contents for each <input /> element, then periodically checks them all again for changes.

This catches the AutoFill'ed selections that the browser makes to the form, and raises the jQuery change event for you - very nice :o)

Note: if you only have one input form element, simply comment out lines 28-31

Might be irrelvant if you are trying to implement the functionality yourself but jQuery-UI has a built in AutoComplete widget that works great and takes care of everything for you...

jQuery-UI autocomplete

I also recommend the jQuery UI Autocomplete Plugin, but if you want to do your own, use something like this:

$('#myAutoComplete').bind('click keyup', function(e) {
    if (!e) var e = window.event;
    // handle zero keyCode (no key was pressed) and Enter
    if (!e.keyCode === 0 || e.keyCode === 13) {
        // your handler goes here
    }
});

The link in Andrew's answer seems to be dead now. I found another copy of the listenForChange extension here and pasted its contents below. However, I wanted to add that, in most cases, I've been able to solve this issue by adding an onchange event alongside my onkeyup event:

$('.product').on('keyup change', searchByProduct);

Here's listenForChange:

// Makes autofill data register as change event
// http://furrybrains.com/2009/01/02/capturing-autofill-as-a-change-event/
// written by Jim Dalton

(function($) {  
    $.fn.listenForChange = function(options) {  
        settings = $.extend({  
            interval: 200 // in microseconds  
        }, options);  

        var jquery_object = this;  
        var current_focus = null;  

        jquery_object.filter(":input").add(":input", jquery_object).focus( function() {  
            current_focus = this;  
        }).blur( function() {  
            current_focus = null;  
        });  

        setInterval(function() {  
            // allow  
            jquery_object.filter(":input").add(":input", jquery_object).each(function() {  
                // set data cache on element to input value if not yet set  
                if ($(this).data('change_listener') == undefined) {  
                    $(this).data('change_listener', $(this).val());  
                    return;  
                }  
                // return if the value matches the cache  
                if ($(this).data('change_listener') == $(this).val()) {  
                    return;  
                }  
                // ignore if element is in focus (since change event will fire on blur)  
                if (this == current_focus) {  
                    return;  
                }  
                // if we make it here, manually fire the change event and set the new value  
                $(this).trigger('change');  
                $(this).data('change_listener', $(this).val());  
            });  
        }, settings.interval);  
        return this;  
    };  
})(jQuery);

$("form").listenForChange();

One solution:

Using: Event input. To select input or textarea 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 ...