jQuery自动完成阻止选择后聚焦

jQuery autocomplete prevent focus after selection

本文关键字：选择 聚焦 jQuery      更新时间：2023-09-26

要求：

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

问题：

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

问题浏览器：

IE8，适用于Chrome。没有尝试其他人。

尝试修复：

  • 我已尝试将焦点设置为select()中的另一个元素作用它确实把重点放在了这个元素上，但只是在专注于输入字段
  • 在中尝试了event.preventDefault()和event.stopPropagation()select（）方法。不起作用
  • 模糊也不起作用

解决方法：

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

类似stackoverflow线程：

jquery自动完成建议后删除焦点

代码：这是我的代码：

$(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 = "";
    });
});

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

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

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

我从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

Try-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 = "";
    });
});
相关文章：