jQuery 自动完成：事件选择

Posted 2023-03-05

【中文标题】jQuery 自动完成：事件选择

【英文标题】：jQuery Autocomplete: Event-select

【发布时间】：2011-12-05 16:58:34

【问题描述】：

当从菜单中选择项目时，我正在尝试提交表单。我在搜索表单上设置了类，并使用了在这里找到的事件选择：http://docs.jquery.com/UI/Autocomplete#event-select

现在，当您使用键盘（向上和向下）选择一个项目时，它会起作用。但是，如果您使用鼠标选择一个项目，它会为您提供之前输入的值。

检查此筛选器：http://www.screenr.com/7T0s

这是我用来提交的：

$("#searchform-input").autocomplete(
    select: function (a, b) 
        $(".searchform1").submit()
    
);

【参考方案1】：

这是因为select 事件的默认行为是在after your event handler is finished running 执行的（因此您可以选择取消它）。

这意味着，当您单击某些内容时，您的表单会在小部件有机会正确填充 input 之前提交。

您应该能够通过执行小部件通常为您执行的操作来解决此问题：

$("#searchform-input").autocomplete(
    select: function (a, b) 
        $(this).val(b.item.value);
        $(".searchform1").submit()
    
);

现在，您可能想知道的是是的，但是为什么当我使用键盘时它会起作用？

发生这种情况是因为focus 事件实际上填充了input 中的焦点项（仔细观察；当您在列表中上下移动时，您会看到input 填充）。当您将鼠标悬停在某个项目上时，将调用 focus 事件，并填充 input。当您使用enter 键选择某些内容时，由于focus 事件，正确的值恰好在input 中。

【讨论】：

这个答案太棒了。对今天真正杀死我的事情的非常好的解释。非常感谢您在这里做出的贡献，安德鲁！

【参考方案2】：

呵呵。这个相当棘手，但解决起来非常简单。只需在选择事件之后将函数延迟 500 毫秒。它完美地工作。任务完成！！ :)

$("#searchform-input").autocomplete(
select: function (a, b) 
    setTimeout(submit,500);
);

【讨论】：

当有真正的解决方案时，不要依赖时间。