0

jqueryでオートコンプリートを使用しようとしていますが、デモデータで機能しますが、自分のデータソースで機能させることができませんでした。ユーザーが人の名前を数文字入力するだけのメーラーを作成しようとしています。連絡先データベースは、対応するメールが[宛先]フィールドに表示されるようにオートコンプリートを支援します。

次のファイルを含めました。

  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

document.loadのjQueryコードは次のとおりです。

   $(function() {
    function log( message ) {
        $('#to').append(message);
        console.log(message);
    }

   $( "#search" ).autocomplete({
        source: "search.php",
        minLength: 2,
        select: function( event, ui ) {
     log( ui.item? ui.item.email : "NO" );
        }
    }); 
});

そして私のHTMLは次のとおりです。

<div class='ui-widget'><input type='text' class='medium' id='search' /></div> <br />
To:<br />
<div class='ui-widget'> <textarea type='text' style='width:80%; height:24px;' id='to' class='ui-widget-content'></textarea></div>

search.phpの結果は、jsonを考慮する限り問題ありません。これは、「Ahmed」の文字が押されたときの出力のサンプルです。

[{"email":"saddi@yahoo.com","name":"Ahmed Qasim"},{"email":"aaaab@alangari.com.sa","name":"Ahmed Abbas"},{"email":"mokhlef@yahoo.com","name":"Ahmed Sahdi"}]

Firebugをチェックして確認したので、search.phpからこの応答を受け取っていることはわかっていますが、検索入力フィールドの下に表示されません...代わりに、表示されるのはリストの切り株にすぎません。 。下の画像のように。

ここに画像の説明を入力してください

しかし、ここでデモコードを使用したとき、これとまったく同じことが期待どおりに機能しました。デモリストが正しく表示されないのはなぜですか。表示できるデータ量に制限はありますか？取得したJSON出力から3つのエントリのみを貼り付けましたが、数十のエントリがありました。

4

2 に答える 2

3

私はkeuneが正しい診断を持っていると思います。search.phpの出力を変更したくない場合は、次のようにすることができます。

            $( "#search" ).autocomplete({
                source: function (request, response) {

                    $.ajax({
                        url: "search.php",
                        type: "POST",
                        dataType: "json",
                        data: { searchText: myQuery, maxResults: 10 },
                        success: function(data) {
                            var mappedData = $.map(data,
                                function(item) {
                                    return {
                                        label: item.name,
                                        value: item.email,
                                        id: item.email
                                    };
                                });

                            response(mappedData);
                            }
                        });
                }, ....
于 2013-01-06T17:29:49.707 に答える
2

サーバーから返すものにはemailandnameフィールドが含まれ、jqueryuiにはandフィールドが必要valueですlabel。

[{"label":"Ahmed Abbas", value: "Ahmed Abbas"}]

labelはオートコンプリートリストに表示されるものでありvalue、アイテムを選択したときに得られる値です。

于 2013-01-06T17:14:16.623 に答える