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

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

eventjQuery UI事件中的对象将包括a .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 的源代码，看看那里发生了什么，但也没有\xe2\x80\x99 找到任何提示。

\n\n

我们可以通过设置超时来做到这一点，该超时在 IE 的 javascript 引擎内部对事件进行排队。因为可以保证，该超时事件将在焦点事件之后排队（这已经由 IE 本身触发）。

\n\n

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

\n