Jqueryオートコンプリート：最初の項目を選択して検索ボックスにフォーカスを置くためにタブを使用

Question

JQuery UIのオートコンプリートを使用すると、検索ボックスにオートコンプリート結果の最初の項目を挿入し、ユーザーは入力を続けることができます。言い換えれば

<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> 

誰かが「目」を入力した場合、上記の例では、彼らは「これを」参照してくださいねとオートコンプリートの選択肢で「それ」。ヒッティングタブは入力に「this」（スペースに注意）を加え、入力にフォーカスを残します。

誰かが私が逃したものについてのポインタを教えてもらえますか？編集

<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" /> 

：私はとても小さな言葉が:)

良いヘッド部からおそらくより便利情報（jqueryの1.7.2）され、非常によくJavascriptを知らないそれはautoFocus: trueことが表示されますそこに私を連れて行きます。さて、入力ボックスにどのようにフォーカスを当て続けるかを考えてみましょう。

Answer 1

Hiya デモhttp://jsfiddle.net/DMDHC/

希望これは、役立ちます:)

あなたがRaを入力するのであれば、あなたがポップアップランボーやその他のオプションを表示し、その後tabキーを押すと、あなたはadded text + " "が表示されていることがわかりますでしょうテキストボックスにフォーカスを置くことで、入力を続けることができます。

私がやったもう一つのことは、デフォルト動作を防止するevent.preventDefault();です。あなたは何をしているか知っていますか？ 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; 
     } 
}); 

​ 

Answer 2

私は、この（のCoffeeScriptを使用）：完璧だ

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