选择后jQuery自动完成防止焦点答案

【问题标题】：jQuery autocomplete prevent focus after selection选择后jQuery自动完成防止焦点
【发布时间】：2012-09-14 15:54:36
【问题描述】：

要求：

我想要一个 jQuery 自动完成元素，它允许用户选择一个项目并使用所选值设置显示字段和隐藏字段。但我也希望在输入字段获得用户焦点时清除字段和隐藏字段。

问题：

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

问题浏览器：

IE8 ，在 Chrome 中工作。其他的没试过。

尝试的修复：

我尝试将焦点设置到select() 中的另一个元素功能。它确实把重点放在了那个元素上，但只是在专注于输入字段
尝试了event.preventDefault() 和event.stopPropagation() 选择（）方法。没用。
模糊也没有用。

解决方法：

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

类似的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 = "";
    });

});

【问题讨论】：

你看过这个stackoverflow.com/questions/2870077/…吗？
@j08691 感谢您的回复，我不确定建议的线程是否与我有相同的问题，该帖子似乎处理防止更改事件触发，而我希望重点关注在用户选择项目后传递给输入字段以外的任何内容。

标签： javascript jquery

【解决方案1】：

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

我能看到解决这个问题的唯一方法毕竟不是让它成为焦点事件，但我想我知道你为什么不想让它成为点击事件：你还想捕捉到字段的制表符.

解决方案：使它成为一个点击处理程序，并添加一个“keyup”处理程序，如果键是一个选项卡，则执行点击处理程序处理程序（仍然允许向下箭头等）。

【讨论】：

感谢您的回复。你是对的，它在使用箭头键时确实有效。它之所以有效，是因为在使用箭头键时，焦点永远不会真正离开输入字段，即使是很短的时间。这是因为当我使用箭头键时，我仍然可以在输入字段上闪烁光标。此外，即使它确实在最短时间内离开焦点，将焦点返回到输入字段的行为也会触发 focus() 方法。
是的，你明白了为什么我不想要一个简单的点击处理程序，因为我想在手机上捕获标签和“下一步”按钮。
您的解决方案无疑会奏效，感谢您的聪明思考。我现在将实现它，但它似乎确实相当昂贵，因为现在 JS 引擎必须为每个键执行 2 个处理程序，一个用于“tab”侦听器，一个用于 jquery 自动建议列表构建器。那好吧！我希望在 select() 函数中有一种更简单的方法。不过感谢您的时间和思考:)

【解决方案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 = "";
    });

});

【讨论】：

【解决方案3】：

我从 jQuery 论坛得到了这个，效果很好！

select: function(event, ui) {
 $(event.target).autocomplete("close")
 setTimeout(function() {
  $(event.target).blur();
 })
}

链接：https://forum.jquery.com/topic/autocomplete-input-field-stays-focused-after-selection

【讨论】：