0

次のコードを使用して、ユーザーがフォームに入力するときにオートコンプリート オプションの 1 つだけを選択できるようにすると、完全に機能します。

var validOptions = ["Bold", "Normal", "Default", "100", "200"]
previousValue = "";

$('#ac').autocomplete({
    autoFocus: true,
    source: validOptions
}).keyup(function() {
    var isValid = false;
    for (i in validOptions) {
        if (validOptions[i].toLowerCase().match(this.value.toLowerCase())) {
            isValid = true;
        }
    }
    if (!isValid) {
        this.value = previousValue
    } else {
        previousValue = this.value;
    }
});

ただし、以下のように配列をオンザフライで作成するために ajax を使用しているため、上記のようにvalidOptionsなどの配列の名前はありません。

質問上記の「方法」を以下の方法で使用するにはどうすればよいですか

$('#ac').autocomplete({
    autoFocus: true,
    source: "/pages/includes/getAgent.php",
    select: function( event, ui ) {
        $('#autoc1').val(ui.item.agent_name);
        $('#comm').val(ui.item.commission_percent);
        return false;
    }
    }).keyup(function() {
        var isValid = false;

        // here is the issue, the new data is not called validOptions
        for (i in validOptions) {
        if (validOptions[i].toLowerCase().match(this.value.toLowerCase())) {

            isValid = true;
        }
    }
        if (!isValid) {
            this.value = previousValue
        } else {
            previousValue = this.value;
        }
    }).data( "ui-autocomplete" )._renderItem = function( ul, item ) {
        return $( "<li>" )
        .append( "<a>" + item.agent_name + "</a>" )
        .appendTo( ul )
    };
4

1 に答える 1

1

keyupイベントが使えなくなります。むしろsource、機能するように設定して、独自の AJAX 要求を作成する必要があります。そのリクエストのコールバック内で、返された結果の有効性をテストする長さをテストするか、サーバー側の戻り JSON をさまざまなプロパティで設定して、結果の数と結果自体を識別します

関数で独自の AJAX を作成する例として、 Remote Data with cache Demoのソース コードを参照してください。source

ユーザーにとって予期しない動作である入力の値を変更するのではなく、エラーインジケーターを設定したり、カスタム_renderItemメソッドを表示するように調整したりするNo resultsことができます。これにより、タイプミスの場合に入力された内容をユーザーが確認できるようになります。

表示するもう 1 つの方法no resultsは、値が返されない場合に AJAX コールバック内でデータを操作することです。

于 2013-03-30T11:32:40.710 に答える