Question

我在输入上有一个keyup事件。当您选择一个值并按Enter键时，此事件适用于自动完成。但是当您点击自动完成值时，它不起作用。

在这种情况下是否有可以使用的事件？

我已经尝试过更改但不起作用。

谢谢！

修改

也许我不清楚，但我指的是浏览器拥有的自动完成功能。我不是想建立自己的。

示例：我有以下事件：

$（ '产物'）KEYUP（searchByProduct）;

当用户点击此输入时，他已输入的旧值会显示（这是执行此操作的浏览器）。如果他点击其中一个值，则函数searchByProduct被不调用。

我必须注册哪个事件来跟踪此点击（并且输入内容已更改）？

Answer 1

This jQuery listenForChange extension执行您所追求的内容 - 它基本上保留了每个<input />元素的内容副本，然后定期再次检查所有内容以进行更改。

这会捕获浏览器对表单所做的自动填充选择，并为您引发jQuery change事件 - 非常好：o）

注意：如果您只有一个输入表单元素，只需注释掉第28-31行

Answer 2

如果你试图自己实现这个功能，那么可能会有所不同，但是jQuery-UI有一个内置的AutoComplete小部件可以很好地工作并为你处理一切......

jQuery-UI autocomplete

Answer 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
    }
});

Answer 4

安德鲁的答案中的链接现在似乎已经死了。我找到了listenForChange extension here的另一个副本并粘贴了下面的内容。但是，我想补充一点，在大多数情况下，我已经能够通过在onkeyup事件中添加onchange事件来解决这个问题：

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

Answer 5

一种解决方案：

使用：事件输入。选择输入或textarea建议

作为观察示例：

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

}）;

以JAVASCRIPT为例：

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

这启动ajax查询......

jQuery：跟踪浏览器自动完成中的点击的事件

5 个答案:

一种解决方案：