我有一个链接列表,我有这个搜索框#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>
问题是当用户键入时,自动完成显示一个列表,然后用户使用鼠标单击结果之一。使用键盘导航时,搜索框的内容会发生变化,但如果用户单击其中一个选项,则不会修改搜索框并立即触发选择事件。
如何使脚本与键盘选择和鼠标选择一起工作?如何区分键盘触发的选择事件和鼠标触发的事件?
最佳答案
对于您的第二个问题:“如何区分键盘触发的选择事件和鼠标触发的事件?”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();
},
...
});
关于jquery-ui - jQuery UI 自动完成选择事件不适用于鼠标单击,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7315556/