我有一个链接列表，我有这个搜索框#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>
问题是当用户键入，自动填充显示列表，然后用户使用鼠标单击其中一个结果。使用键盘导航，搜索框的内容已更改，但如果用户单击其中一个选项，搜索框将不被修改，并且选择事件立即被触发。
解决方法
对于你的第二个问题：“我如何区分由键盘触发的选择事件与鼠标触发的事件？”
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();
},...
});
