jQuery UI自动完成选择事件不适用于鼠标单击 [英] jQuery UI autocomplete select event not working with mouse click

问题描述

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

I have a list of links, and I have this search box #reportname. When the user types in the search box, autocomplete will show the text of the links in a list.

<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键，浏览器将转到链接的地址.到目前为止一切顺利.

The user can then use the keyboard arrow to select one of the text, and when he press ENTER, browser will go to the address of the link. So far so good.

<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事件.

The issue is when the user types, autocomplete shows a list, and then the user use the mouse to click one of the result. With keyboard navigation, the content of the search box is changed, but if the user clicks one of the options, the search box is not modified and the select event is immediately triggered.

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

How can I make the script work with keyboard selection and mouse selection? How can I differentiate between select events that are triggered by keyboard with the ones triggered by mouse?

推荐答案

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

Thanks to @William Niu and firebug, I found that the select event parameter 'ui' contains the complete selected value: ui.item.value. So instead of depending on jquery UI to change the text of the textbox, which didn't happen if the user clicks with mouse, I just pick up the selected value from '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
    };
})

这篇关于jQuery UI自动完成选择事件不适用于鼠标单击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！