Question

我有一个链接列表，我有这个搜索框#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>

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

如何使用键盘选择和鼠标选择来使脚本正常工作？如何区分键盘触发的选择事件和鼠标触发的事件？

Answer 1

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

jQuery UI事件中的event对象将包含.originalEvent，它包含的原始事件。它可能已被多次包装，例如在自动完成小部件的情况下。因此，您需要跟踪树以获取原始事件对象，然后您可以检查事件类型：

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

Answer 2

感谢@William Niu和firebug，我发现select事件参数'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
    };
})

Answer 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);
},

Answer 4

有同样的问题/问题。

Jquery：1.11.1 用户界面：1.11.0

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

如果是肯定的：将此更新为最新版本或仅禁用它进行测试。

我从1.5.5更新到1.13.0

帮助我。祝你好运！

Answer 5

我最近遇到了完全相同的问题（自动完成项目无法点击，键盘事件正常工作）。

原来，在我的情况下，答案根本不是JS相关的。自动完成UI无法单击，因为它缺少z-index CSS属性的适当值。

ionic plugin add cordova-plugin-googlemaps --variable API_KEY_FOR_IOS="YOUR_IOS_API_KEY_IS_HERE"

这就是诀窍。

Answer 6

这可能有点变形，但我有类似的情况，选择自动完成值会使输入字段为空。答案是忽略“更改”事件（默认处理这些事件）并将其替换为“autocompletechange”事件的绑定。在自动填充的值位于字段=＆gt;之前触发“更改”事件处理正常的“更改”事件时，该字段具有“空”值。

// 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] }

Answer 7

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

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

查看此帖子 - https://stackoverflow.com/a/19781850/1565521

Answer 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
          })

Answer 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：搜索术语连衣裙->

jQuery UI自动完成选择事件无法使用鼠标单击

9 个答案: