28

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

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

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

ありがとう。

4

4 に答える 4

43

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

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

            }

        });
于 2012-12-17T15:36:20.150 に答える
14

これらの他の答えは両方とも組み合わせてうまく機能します。

また、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」に一致する最初の項目を引き続き選択します。コントロールに表示されないだけです。

于 2013-07-11T19:10:57.923 に答える
3

"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;
}
于 2012-07-27T04:31:10.453 に答える