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

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 。当它具有焦点时，它会轮询输入值，以便即使自动完成不会触发任何事件，也会检测到更改。