jQuery UI自动完成选择事件不适用于鼠标单击答案

【问题标题】：jQuery UI autocomplete select event not working with mouse clickjQuery UI自动完成选择事件不适用于鼠标单击
【发布时间】：2025-11-24 22:55:02
【问题描述】：

我有一个链接列表，我有这个搜索框#reportname。当用户在搜索框中输入内容时，自动完成功能会在列表中显示链接的文本。

<div class="inline">
<div class="span-10">
<label for="reportname">Report Name</label>
<input type="text" name="reportname" id="reportname" />
</div>
<div class="span-10 last">
<button type="button" id="reportfind">Select</button>
</div>
</div>

然后用户可以使用键盘箭头选择其中一个文本，当他按下 ENTER 时，浏览器将转到链接的地址。到目前为止一切顺利。

<script type="text/javascript">
    $(document).ready(function () {
        $("#reportname").autocomplete({
            source: $.map($("a.large"), function (a) { return a.text }),
            select: function () { $("#reportfind").click() }
        })
        $("#reportfind").click(function () {
            var reportname = $("#reportname")[0].value
            var thelinks = $('a.large:contains("' + reportname + '")').filter(
                function (i) { return (this.text === reportname) })
            window.location = thelinks[0].href
        })
    });
</script>

问题是当用户键入时，自动完成显示一个列表，然后用户使用鼠标单击其中一个结果。使用键盘导航，会改变搜索框的内容，但是如果用户点击其中一个选项，搜索框不会被修改，会立即触发 select 事件。

如何使脚本与键盘选择和鼠标选择一起工作？如何区分键盘触发的选择事件和鼠标触发的选择事件？

【问题讨论】：

标签： jquery-ui

【解决方案1】：

关于您的第二个问题：“如何区分由键盘触发的选择事件和由鼠标触发的选择事件？”

jQuery UI 事件中的event 对象将包含一个.originalEvent，它包装的原始事件。不过，它可能已经被包装了多次，例如在 Autocomplete 小部件的情况下。所以，你需要追溯树来获取原始事件对象，然后你可以检查事件类型：

$("#reportname").autocomplete({
    select: function(event, ui) {
        var origEvent = event;
        while (origEvent.originalEvent !== undefined)
            origEvent = origEvent.originalEvent;
        if (origEvent.type == 'keydown')
            $("#reportfind").click();
    },
    ...
});

【讨论】：

谢谢！您的回答使我检查了事件参数，尤其是“ui”。原来我可以使用ui.item.value来获取选中项！

【解决方案2】：

感谢@William Niu 和firebug，我发现选择事件参数'ui'包含完整的选择值：ui.item.value。因此，我不再依赖 jquery UI 来更改文本框的文本（如果用户用鼠标单击就不会发生这种情况），我只是从 'ui' 中选择了选定的值：

$("#reportname").autocomplete({
    select: function (event, ui) {
        var reportname = ui.item.value
        var thelinks = $('a.large:contains("' + reportname + '")').filter(
            function (i) { return (this.text === reportname) })
        window.location = thelinks[0].href
    };
})

【讨论】：

致这个问题的读者：查看William Niu的答案，真的很棒，很强大。

【解决方案3】：

我在所有版本的 IE（包括 9）中对其进行了测试，并且在我使用鼠标选择项目后总是以一个空的输入控件结束。这引起了一些头痛。我什至去查看 jQuery UI 的源代码，看看那里发生了什么，但也没有找到任何提示。

我们可以通过设置一个超时来做到这一点，它在 IE 的 javascript 引擎中内部排队一个事件。因为有保证，这个超时事件会在焦点事件之后排队（之前已经被IE自己触发过）。

select: function (event, ui) {
    var label = ui.item.label;
    var value = ui.item.value;
    $this = $(this);
    setTimeout(function () {
        $('#txtBoxRole').val(value);
    }, 1);
},

【讨论】：

【解决方案4】：

有同样的问题/问题。

jQuery：1.11.1 用户界面：1.11.0

问题：你是否同时使用了 bassistance jquery validte 插件？

如果是肯定的：将其更新到最新版本或仅将其禁用以进行测试。

我从 1.5.5 更新到 1.13.0

对我有帮助。祝你好运！

【讨论】：

【解决方案5】：

我最近遇到了完全相同的问题（自动完成项目不可点击，键盘事件有效）。

事实证明，就我而言，答案与 JS 完全无关。自动完成 UI 无法点击只是因为它缺少 z-index CSS 属性的适当值。

.ui-autocomplete {
    z-index: 99999; /* adjust this value */
}

成功了。

【讨论】：

这对我来说可以将点击的项目放在文本框中。我确实不需要区分由键盘和鼠标触发的选择事件。

【解决方案6】：

这可能有点远，但我也遇到过类似的情况，选择自动完成值会使输入字段为空。答案是忽略“更改”事件（因为这些事件是默认处理的）并将它们替换为绑定到“自动完成更改”事件。 “更改”事件在自动完成的值出现在字段中之前触发 => 在处理正常的“更改”事件时，该字段具有“空”值。

// ignore the "change" event for the field
var item = $("#"+id); // JQuery for getting the element
item.bind("autocompletechange", function(event, ui) { [call your handler function here] }

【讨论】：

【解决方案7】：

我遇到了类似的问题。当用户单击一个选项时，我想提交表单。但是表单甚至在输入的值可以设置之前就被提交了。因此，在服务器端，控制器得到了一个空值。

我使用 William Niu 答案的修改版本解决了这个问题。

查看这篇文章 - https://*.com/a/19781850/1565521

【讨论】：

【解决方案8】：

我遇到了同样的问题，鼠标点击没有选择被点击的项目。我的代码应该进行 ajax 调用以根据自动完成源中的选择项目获取数据。

之前的代码：鼠标点击不起作用。

 select: function(event, ui) {
          event.preventDefault();
          for(i= 0; i< customer.length; i++)
          if(document.getElementById('inputBox').value == customer[i].name)
          {

          $.ajax({
          call
          })

更改代码：鼠标点击工作

select: function(event, ui) {
          // event.preventDefault();
          for(i= 0; i< customer.length; i++)
          // if(document.getElementById('inputBox').value == customer[i].fields.name)
          if(ui.item.value == customer[i].name)
          {
          $.ajax({
          call
          })

【讨论】：

【解决方案9】：

在开发人员工具控制台中检查代码后，我注意到添加了两个列表项。我从我的响应代码中删除了配对<li></li>，哦，是的，链接有效

我还添加了这个函数作为点击事件：

 $("#main-search").result(function ()
    {
        $("#main-search").val("redirecting...."), window.location.href = $("#main-search").attr("href").match(/page=([0-9]+)/)[1];
    })

这个可行，你可以test it here：搜索词dress -->

【讨论】：