7

オートコンプリート jQuery を実装しようとしていますが、jQuery UI が提供するオートコンプリート機能を理解していません。

コールバック関数を使用して、応答をラベル/値のペアとして取得します。任意のラベル/値のペアを返してそのオプションを表示しようとしているサンプル コードがいくつかありますが、機能していません。誰かがそれで私を助けてくれたり、簡単なプログラムを見せてくれたりしたら、それは素晴らしいことです.

http://jsfiddle.net/kB25J/

HTML:

<html>
    <body>
      Please enter your country name
      <input id ="book" type="text" value="">
    </body>
</html>​

JavaScript:

$("#book").autocomplete({
    source: function(request, response) {
        alert(request.term);
        response(function() {
            return {
                label: "hi",
                value: "bye"
            }
        });
        alert(reponse);
    }
});

ありがとう

4

5 に答える 5

8

応答を送信するときは、関数の代わりに配列を渡します。

$(function() {
    $("#book").autocomplete({        
        source: function(request, response) {
            var data = [{
                    label: "hi",
                    value: "bye"
                    }];
            response(data);
        },
        select: function( event, ui ) {
            $( "#book" ).val( ui.item.label); //ui.item is your object from the array
            return false;
        }
    });
});​
于 2012-09-19T15:07:53.053 に答える
4

この場合「こんにちは」/「さようなら」の場合、一致するのが 1 つだけであっても、ソースに配列を返す必要があります。

jqueryui.com のこの例に見られるように

response( $.map( data.geonames, function( item ) {
    return {
        label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
        value: item.name
    }
}));

リモート応答のマップを使用して、ラベル/値のキー/値ペアの配列を返します。

ソースが単なる国のリストである場合は、文字列の配列をソースとして使用できます。

var countries = ["USA", "Canada", "Mexico", ...]

$('input').autocomplete({
    source : countries
});

リモート ソースを使用している場合:

$('input').autocomplete({
    source : function (request, response) {
        $.ajax({
            url: "url_to_get_countries",
            dataType: "json",
            success: function( data ) {
            response( $.map( data.countries, function( item ) {
            return {
                label: item.country_name,
                value: item.country_id
            }
            }));
            }
        });
    }
});
于 2012-09-19T14:40:01.093 に答える
1

@LakshmikanthanVijayaraghavan

オートコンプリート ガイドでわかるように、jquery プラグインでオートコンプリートを実装するには 3 つの方法があります。

  • 値のリストを含む配列を提供する
  • 値/ラベルのペアを持つオブジェクトの配列を提供する
  • オブジェクト配列を取得するための URL を提供する

最初の 2 つのオプションは、値の固定リスト用です。オートコンプリート リストを動的に入力する場合は、最後のリストを実装する必要があります。

これを行うには、オブジェクト配列を取得するための URL を指定する必要があります。ラベルとキーを非表示にしたい場合は、入力タイプを非表示にして、その値も設定する必要があります。

例えば

$( "#book" ).autocomplete({
           source: "getValues.htm",                     
           select: function(event, ui) {  
                $( "#book" ).val(ui.item.label);  
                $( "#book_hidden" ).val(ui.item.value);
                return false;  
            }                           
        });

getValues.html は、ラベルと値のペアの配列を返す必要があります。

お役に立てれば

于 2012-09-19T15:02:04.000 に答える