web-dev-qa-db-ja.com

オートコンプリートでフリーテキストの入力を禁止しますか？

JQuery UIオートコンプリートウィジェットでフリーテキストエントリを禁止することは可能ですか？

たとえば、ユーザーにオートコンプリートリストに表示されるアイテムのリストからの選択のみを許可し、ランダムなテキストを書き込めないようにしたいです。

これを行う方法を説明するデモ/ドキュメントには何も見当たりませんでした。

http://jqueryui.com/demos/autocomplete/

このようなオートコンプリートを使用しています

$('#selector').autocomplete({
    source: url,
    minlength: 2,
    select: function (event, ui) {
        // etc
    }
jqueryjquery-uijquery-autocomplete
42
JK.

1つの方法は、フォームの送信時に追加の検証を使用して（フォームを使用している場合）、テキストが有効なオプションの1つでない場合にエラーを強調表示することです。

別の方法は、オプションが選択されていない場合でも発生するオートコンプリートの変更イベントにアタッチすることです。次に検証を実行して、ユーザー入力がリストにあることを確認するか、そうでない場合はエラーを表示できます。

3
Aaron Janes

APIドキュメント によると、エントリがリストから選択されなかった場合、changeイベントのuiプロパティはnullになるため、これと同じようにフリーテキストを許可しないことができます。 ：

change: function(event, ui) {
    if (ui.item == null) {
      event.currentTarget.value = ''; 
      event.currentTarget.focus();
    }
}
83
Neils

ユーザーがリストからアイテムを取得するだけの場合は、オートコンプリートコンボボックスを使用します。

http://jqueryui.com/demos/autocomplete/#combobox

HTH

10
Raja

ユーザーがオートコンプリートリストから推奨事項を選択することを制限する場合は、次のようにclose関数を定義してみてください。結果のドロップダウンが閉じるときにclose関数が呼び出されます。ユーザーがリストから選択した場合はevent.currentTargetが定義され、そうでない場合はユーザーがオプションを選択せず​​に結果のドロップダウンが閉じます。彼らがオプションを選択しない場合は、入力を空白にリセットします。

/**
 * The jQuery UI plugin autocomplete
 */
$.widget( "ui.autocomplete", $.ui.autocomplete, {
   options: {
      close: function( event, ui ) {
         if (typeof event.currentTarget == 'undefined') {
            $(this).val("");
         }
      }
   }
 });
0
user7793758

古い質問ですが、ここに：

    var defaultVal = '';
    $('#selector').autocomplete({
        source: url,
        minlength: 2,
        focus: function(event, ui) {
            if (ui != null) {
                defaultVal = ui.item.label;
            }
        },
        close: function(event, ui) {
            $('#searchBox').val(defaultVal);
        }
    });
0
Joe

私はあなたに「下矢印」ボタンを与えるコンボボックスモジュールを使いました。次に、入力タグに、41行目付近の入力タグに次のコードを追加します（コンボボックスのバージョンによって異なります http://jqueryui.com/demos/autocomplete/#combobox ）

input.attr（ "readonly"、 "readonly"）;

次に、ユーザーが入力ボックスをクリックしたときにドロップリストが表示されるようにコードを追加します。

私の目的のために、モジュールに渡すことができる読み取り専用フラグを追加したので、それを読み取り専用にする必要がある場合は、オン/オフにすることもできます。

0
Mike