Question

我有一些jQuery监听器设置，用于监听type="text"字段上的表单输入。但是，当用户从自动完成下拉框中选择一个选项（即他们之前输入的值，这些值已被记住以备将来使用）时，下面的听众不会收集该值。

这是我目前的代码：

$('#text-input').on("keyup change paste", function() {
    var textInput = $(this).val();
    // do something with textInput
});

上述内容适用于粘贴和输入，但不适用于从下拉建议列表中选择的选项。

有谁能告诉我我需要添加哪些听众？

干杯。

我的解决方案

尝试使用autocomplete侦听器后，我发现这似乎在我的场景中不起作用，所以我添加了以下代码，受到接受的答案的启发。

var timer = 0;
$('#text-input').on("keyup change paste", function() {
    if (timer != null) {
        clearTimeout(timer);
        timer = setTimeout(function() {
            var textInput = $(this).val();
            // do something with textInput
        }, 1000);
    }
});

额外的好处是我的文本输入采用了URL，然后使用它将其他内容加载到页面中。通过设置超时，这意味着当用户仍在输入URL时，脚本不会一直尝试加载URL。

Answer 1

~~您需要在建议列表中添加一个监听器（在整个列表中with delegation或依次在每个值上）。每当在建议上发生点击事件时，您都会更新搜索框中的值。~~

我刚刚意识到你的意思是浏览器的默认建议（即autocomplete属性）。这个答案可能有所帮助：Javascript detect a selection of browser AutoComplete value。它在聚焦时轮询输入值，这样即使自动完成没有触发任何事件，也会检测到更改。

用于文本字段上自动完成选择的jQuery侦听器

1 个答案: