当我使用 JQuery UI 自动完成时,我需要让 tab 键用自动完成结果中的第一项填充搜索框,然后包含一个空格,然后允许用户继续输入。
<div class="ui-widget">
<form id="searchbox" method="GET" action="http://duckduckgo.com/">
<input id="search" type="text" name="q">
<input id="submit" type="submit" value="Search">
</form>
</div>
<script>
var tabKey = 9;
$('#search').autocomplete({
source: [ 'this', 'that', 'foobar' ],
delay: 0,
selectFirst: true,
select: function(event, ui) { if (event.keyCode == tabKey) {
$('#search').focus().select();
} }
});
// without this, the tab key doesn't trigger an event
$('.ui-autocomplete').keypress(function(event) {});
</script>
换句话说,在上面的示例中,如果有人键入“th”,他们会在自动完成选项中看到“this”和“that”。点击选项卡会将“this”(注意空格)添加到输入中,并且焦点将保留在输入中。
有人可以告诉我我错过了什么吗?我不太懂Javascript,所以小字好:)
HEAD 部分可能还有更有用的信息(jquery 1.7.2):
<script src="js/jquery-latest.js"></script>
<script src="js/jquery-ui-1.8.20.custom.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery-ui-1.8.20.custom.css" />
编辑:看来这autoFocus: true
会让我走到那里。现在,如果我能弄清楚如何将注意力集中在输入框上。