Jquery自动完成：使用选项卡选择第一项并保持专注于搜索框答案

【问题标题】：Jquery autocomplete: using tab to select first item and remain focus on search boxJquery自动完成：使用选项卡选择第一项并保持专注于搜索框
【发布时间】：2012-05-03 07:50:10
【问题描述】：

当我使用 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 可以让我在中途获得成功。现在，如果我能弄清楚如何将注意力集中在输入框上。

【问题讨论】：

标签： jquery jquery-ui autocomplete

【解决方案1】：

嗨演示 http://jsfiddle.net/DMDHC/

希望这会有所帮助，:)

因此，如果您输入 Ra，您会看到弹出的 rambo 和其他选项，然后点击 tab 键，您会看到 added text + " " 将出现在文本框上，这样您就可以继续输入。

我做的另一件事是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" );
    },
        select: function(event, ui) {

             var TABKEY = 9;
            this.value = ui.item.value;

            if (event.keyCode == TABKEY) { 
                event.preventDefault();
                this.value = this.value + " ";
                $('#search').focus();
            }

            return false;
        }
});

【讨论】：

太完美了。我不得不做一些调整，现在这正是我所需要的。谢谢你:)
@Ovid 很高兴它有帮助！随时布鲁夫！祝你有个好的一天！干杯。

【解决方案2】：

我用这个（咖啡脚本）：

$("#autocomplete").keydown (event) ->
    if event.keyCode != $.ui.keyCode.TAB then return true
    $(this).trigger($.Event 'keydown', keyCode: $.ui.keyCode.DOWN)
    false

【讨论】：

【解决方案3】：

自动对焦将在下拉搜索中选择第一条记录...

您的代码只需要包含autoFocus: true,，如下所示：

$('#search').autocomplete({
    source: url,
    delay: 0,
    autoFocus: true,
    select: function( event, ui ) {
        $( "#id" ).val( ui.item.id );
        $(this).closest('form').submit();
    },
    focus: function( event, ui ) { event.preventDefault(); }
});

【讨论】：