jquery-ui - 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>

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

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

Answer 1

对于您的第二个问题:“如何区分键盘触发的选择事件和鼠标触发的事件？”
event jQuery UI 事件中的对象将包含 .originalEvent ，它包装的原始事件。不过，它可以被多次包装，例如在自动完成小部件的情况下。因此，您需要跟踪树以获取原始事件对象，然后您可以检查事件类型:

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