用于在文本字段上自动完成选择的 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。它在获得焦点时轮询输入的值，这样即使自动完成没有触发任何事件，也会检测到更改。