46

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

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

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

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

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

$('#selector').autocomplete({
    source: url,
    minlength: 2,
    select: function (event, ui) {
        // etc
    }
4

7 に答える 7

90

APIドキュメントによると、エントリがリストから選択されていない場合、changeイベントのuiプロパティはnullであるため、次のように簡単にフリーテキストを禁止できます。

$('#selector').autocomplete({
    source: url,
    minlength: 2,
    change: function(event, ui) {
        if (ui.item == null) {
          event.currentTarget.value = ''; 
          event.currentTarget.focus();
        }
    }
});
于 2013-03-29T13:58:06.447 に答える
10

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

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

HTH

于 2010-05-25T22:59:07.370 に答える
3

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

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

于 2010-05-25T23:13:26.703 に答える
0

「下矢印」ボタンが表示されるコンボボックスモジュールを使用しました。次に、入力タグに、41行目のすぐ近くの入力タグに以下を追加します（コンボボックスのバージョンによって異なりますhttp://jqueryui.com/demos/autocomplete/#combobox）

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

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

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

于 2012-05-03T17:55:23.503 に答える
0

古い質問ですが、ここにあります：

    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);
        }
    });
于 2012-08-28T21:27:32.203 に答える
0

ユーザーがオートコンプリートリストから推奨事項を選択するように制限する場合は、次のように閉じる関数を定義してみてください。結果ドロップダウンが閉じるときに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("");
         }
      }
   }
 });
于 2019-10-24T13:25:36.440 に答える
-1

セットリストを使用している場合はコンボボックスオプションが適切に機能しますが、json getを介して動的に生成されたリストがある場合は、変更時にのみデータをキャプチャできます。

以下に追加のパラメーターを含む完全な例。

        $("#town").autocomplete(
        {       
            select: function( event, ui ) {
                $( "#town" ).val( ui.item.value );
                return false;
            },        
            focus: function( event, ui ) {
                    $( "#town" ).val( ui.item.label );
                    return false;
                },           
            change: function(event, ui) {
                if (!ui.item) {
                    $("#town").val("");
                }
            },
            source: function(request, response) {
                $.ajax({
                    url: 'urltoscript.php',
                    dataType: "json",
                    data: {
                        term : request.term,
                        country : $("#abox").val()    // extra parameters
                    },                        
                    success: function(data) {
                        response($.map(data,function (item)
                        {                                
                            return {
                                id: item.id,
                                value: item.name
                            };
                        }));
                    }
                });
            },
            minLength: 3
            , highlightItem: true                                
        });
于 2017-01-15T16:16:58.337 に答える