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

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>

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

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

Answer 1

感谢@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 2

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

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

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