web-dev-qa-db-ja.com

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

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

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

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

ありがとう。

jqueryjquery-uijquery-ui-autocomplete
25
Ali B

強制選択には、オートコンプリートの "change"イベント を使用できます

        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("");
                }

            }

        });
39
Saurabh

これらの他の両方の答えを組み合わせるとうまくいきます。

また、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」に一致する最初の項目が選択されます。コントロールには表示されません。

12
Richard

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

参照

フォーカスイベント：

focus: function(e, ui) {
    return false;
}
3
Ricardo Alvaro Lohmann

変数を定義する

var inFocus = false;

次のイベントを入力に追加します

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

キーダウンイベントをウィンドウにアタッチします

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