当我使用
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,所以小字很好:)
也许更有用的信息(jquery 1.7.2)来自HEAD部分:
<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会让我在那里.现在,如果我能弄清楚如何将注意力集中在输入框上.
解决方法
Hiya demo
http://jsfiddle.net/DMDHC/
希望这可以帮助,:)
因此,如果您键入Ra,您将看到rambo和其他选项弹出,然后按Tab键,您将看到添加的文本“”将显示焦点在文本框上,以便您可以继续键入.
我做的另一件事是event.preventDefault();这将阻止任何默认行为,让你知道你在做什么bruv! B-)
jquery代码
$( "#search" ).autocomplete({ source: function( req,resp ) { $.post( "/echo/json/",{ json: '["Rambo","Foobar","This","That","Batman","Hulk"]',delay: 1 },function(data) { resp( data ); },"JSON" ); },ui) { var TABKEY = 9; this.value = ui.item.value; if (event.keyCode == TABKEY) { event.preventDefault(); this.value = this.value + " "; $('#search').focus(); } return false; } });