JQuery: событие, которое отслеживает щелчок в автозаполнении браузера

У меня есть событие keyup на входе. Это событие отлично подходит для автоматического завершения, когда вы выбираете значение и нажимаете клавишу ввода. Но это не сработает, когда вы нажимаете на автоматическое полное значение.

Есть ли событие, которое я могу использовать в таком случае?

Я уже пробовал изменение, но он не работает.

Спасибо!

Edit:

Возможно, я не был ясен, но я имею в виду функцию автозаполнения, которую имеют браузеры. Я не пытаюсь создать свой собственный.

Пример: У меня есть следующее событие:

$( 'продукт.') KeyUp (searchByProduct);.

Когда пользователь нажимает на этот ввод, появляются старые значения, которые он уже набрал (это браузер, который делает это). Если он нажимает на одно из значений, функция searchByProduct называется не.

Какое событие мне нужно регистрировать для отслеживания этого щелчка (и что входной контент изменился)?

Ответ 1

Это расширение jQuery listenForChange делает то, что вам нужно - оно в основном хранит копию содержимого для каждый элемент <input />, а затем периодически проверяет их снова для изменений.

Это улавливает выбранные автозаполнение, которые браузер делает в форме, и вызывает событие jQuery change для вас - очень приятно: o)

Примечание: если у вас есть только один элемент формы ввода, просто прокомментируйте строки 28-31

Ответ 2

Возможно, будет некорректно, если вы пытаетесь реализовать свою функциональность самостоятельно, но jQuery-UI имеет встроенный виджет AutoComplete, который отлично работает и заботится обо всем для вас...

автозаполнение jQuery-UI

Ответ 3

Я также рекомендую jQuery UI Autocomplete Plugin, но если вы хотите сделать свой собственный, используйте что-то вроде этого:

$('#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
    }
});

Ответ 4

Ссылка в ответе Энд теперь кажется мертвой. Я нашел еще одну копию расширения listenForChange и вставил его содержимое ниже. Тем не менее, я хотел добавить, что в большинстве случаев я смог решить эту проблему, добавив событие onchange вместе со своим событием onkeyup:

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

Здесь 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();

Ответ 5

Одно решение:

Использование: Событие input. Чтобы выбрать предложения ввода или textarea

ДЛЯ ПРИМЕРЫ ДЛЯ JQUERY:

$(input).on('input', function() { 
alert("Number selected ");

});

ПРИМЕР ДЛЯ JAVASCRIPT:

<input type="text"  onInput="affiche(document.getElementById('something').text)" name="Somthing" />

Этот запуск ajax-запроса...