JQueryオートコンプリート：リストから選択を強制する方法（キーボード）

Question

私はJQuery UIオートコンプリートを使用しています。すべてが期待どおりに機能しますが、キーボードの上/下キーを使用して循環すると、テキストボックスはリスト内の項目で予期されているように表示されますが、リストの終わりに達してもう一度下矢印を押すと私が入力した元の用語が表示されます。これは基本的にユーザがそのエントリを提出できるようにします。

質問：リスト内の項目に選択範囲を限定し、キーボード選択から入力内のテキストを削除する簡単な方法はありますか？

例：{'Apples (AA)', 'Oranges (AAA)', 'Carrots (A)'}を含むリストがある場合、ユーザーが「app」と入力すると、リストの最初の項目（ここでは「Apples（AA）」）が自動的に選択されますが、矢印、 'app'が再度テキストボックスに表示されます。どうすればそれを防ぐことができますか？

ありがとうございました。フォーカスイベントで

Answer 1

"Before focus is moved to an item (not selecting), ui.item refers to the focused item. The default action of focus is to replace the text field's value with the value of the focused item, though only if the focus event was triggered by a keyboard interaction. Canceling this event prevents the value from being updated, but does not prevent the menu item from being focused."

reference

：

focus: function(e, ui) { 
    return false; 
} 

Answer 2

力の選択のため、あなたはオートコンプリート

の "change" event

 var availableTags = [ 
      "ActionScript", 
      "AppleScript" 
     ]; 
     $("#tags").autocomplete({ 
      source: availableTags, 
      change: function (event, ui) { 
       if(!ui.item){ 
        //http://api.jqueryui.com/autocomplete/#event-change - 
        // The item selected from the menu, if any. Otherwise the property is null 
        //so clear the item for force selection 
        $("#tags").val(""); 
       } 

      } 

     }); 

Answer 3

櫛これらのその他の回答の両方を使用することができますinationはうまくいく。

また、event.targetを使用してテキストをクリアすることもできます。これは、複数のコントロールに自動補完を追加する場合や、セレクターを2回入力したくない場合（保守性の問題がある場合）に役立ちます。

$(".category").autocomplete({ 
    source: availableTags, 
    change: function (event, ui) { 
     if(!ui.item){ 
      $(event.target).val(""); 
     } 
    }, 
    focus: function (event, ui) { 
     return false; 
    } 
}); 

「フォーカス」はfalseを返していても、アップ/ダウンキーがまだ値を選択すること、しかし、注意すべきです。このイベントをキャンセルすると、テキストの置換がキャンセルされます。したがって、 "j"、 "down"、 "tab"は "j"と一致する最初の項目を選択します。それはコントロールに表示されません。

Answer 4

ご入力

.on('focus', function() { 
    inFocus = true; 
}) 
.on('blur', function() { 
    inFocus = false; 
}) 

に以下のイベントを追加します。そして、それは発射するウィンドウにリストがロードされている

$(window) 
    .keydown(function(e){ 
     if(e.keyCode == 13 && inFocus) { 
      e.preventDefault(); 
     } 
    });