Question

要求：

我想要一个jQuery自动完成元素，它允许用户选择一个项目并设置显示字段和一个带有所选值的隐藏字段。但是当输入字段被用户接收到焦点时，我还希望清除字段和隐藏字段。

问题：

我面临的问题是，当用户选择一个项目时，它几乎就像jQuery正在执行onSelect函数，然后再次将焦点发送到输入字段，这会触发我的focus（）事件（因此清除我的选择）

问题浏览器：

IE8，适用于Chrome。没试过别人。

尝试修复：

我尝试将焦点设置为select()中的另一个元素功能。它确实把重点放在了那个元素上，但仅限于之后专注于输入领域
尝试了event.preventDefault()和event.stopPropagation() select（）方法。没用。
Blur也没有工作。

解决方法：

我想我可以将清算更改为点击而非焦点，但这不是我想要的。

类似的stackoverflow线程：

jquery autocomplete remove focus after suggest

代码： 这是我的代码：

$(function () {
    $("#autosuggest").autocomplete({
        source: "my server path",
        minLength: 3,
        select: function (event, ui) {
            if (ui.item) {
                $("#autosuggest").val(ui.item.value);                    
                $("#hidden").val(ui.item.id);                                                                                
            }
        }
    });
    $("#autosuggest").focus(function () {
        $("#hidden").val("");
        this.value = "";
    });

});

Answer 1

问题是：当您点击自动填充建议时，焦点会转移到该下拉菜单，此后很快就会返回您的输入。如果您使用向下箭头按钮选择自动完成建议，是否仍会出现此问题？如果你不这样做，那就是问题所在。

我能看到解决这个问题的唯一方法就是不要让它成为一个焦点事件，但我想我知道为什么你不想让它成为一个点击事件：你还想捕捉到该字段的标签。

解决方案：将其设为点击处理程序，并添加一个'keyup'处理程序，如果该键是一个标签（仍然允许向下箭头等），则执行点击处理程序处理程序。

Answer 2

尝试onSelect功能..

 $(function () {
    $("#autosuggest").autocomplete({
        source: "my server path",
        minLength: 3,
        select: function (event, ui) {
            if (ui.item) {
                $("#autosuggest").val(ui.item.value);                    
                $("#hidden").val(ui.item.id);                                                                                
            }
        },
        onSelect: function (suggestion) {
        $(this).click();}
    });
    $("#autosuggest").focus(function () {
        $("#hidden").val("");
        this.value = "";
    });

});

jQuery自动完成功能可在选择后防止焦点

2 个答案: