Jquery自动完成:使用选项卡选择第一个项目并保持对搜索框的关注

当我使用 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;
        }
});

​

相关文章

jQuery插件的种类 1、封装对象方法 这种插件是将对象方法封装起来,用于对通过选择器获取的jQuery对象进...
扩展jQuery插件和方法的作用是非常强大的,它可以节省大量开发时间。 入门 编写一个jQuery插件开始于给...
最近项目中需要实现3D图片层叠旋转木马切换的效果,于是用到了jquery.roundabout.js。 兼容性如图: ht...
一、什么是deferred对象? 开发网站的过程中,我们经常遇到某些耗时很长的javascript操作。其中,既有异...
AMD 模块 AMD(异步模块定义,Asynchronous Module Definition)格式总体的目标是为现在的开发者提供一...