2

「方法 A: ajax なし」を検討してください。

$(function() {
    var emails = [
        "john@beatles.com",
        "george@beatles.com",
        "paul@beatles.com",
        "ringo@beatles.com"
    ];

    $( "#invitees" ).autocomplete({
          source:emails
    });
});

これには、比較的小さな「フィルタリングされていない」配列が与えられます。オートコンプリート機能により、入力時にフィルター処理されます。このデータを 1 回フェッチしたいので、データベースへの呼び出しは 1 回だけで済みます。

「方法 B: '内部' URL:

$( "#invitees" ).autocomplete({
    source:"/api/get/users"
});

これは私が期待するようには機能しません。何を入力しても、リスト全体が常に表示されます。さて、ドキュメント、他の S/O の質問、および私が見つけることができるすべての例を読んで調査した後、通常は次のような結論になります。

「データはサーバー側でフィルタリングする必要があります。オートコンプリート ウィジェットはURL にtermパラメータを追加するため、結果の URL は次のようになります。/search.php?term=whatityped

私はそれを処理できますが、それは「方法 A」では完全に起こっているわけではありませんよね? 大規模なデータ セットの場合、100,000 件の結果を事前に読み込む必要はありません。しかし、この場合、1 つのクエリを実行してそれで完了する機能が必要です。そうすれば、モバイル ユーザーが「1 バー」のサービスで砂漠に立っている場合、サーバーが文字を入力するたびに新しいデータを繰り返し要求している間、電話がロックされることはありませんよね?

リクエストが内部 URL:'/api/get/users' に送信される場合、PHP コードの関連部分は次のとおりです。

function get($className,$param1="all",$param2=""){
    //above parameters will be refactored...
    $stmt=$this->db->prepare('SELECT username FROM users');
    $stmt->execute();
    $this->data=$stmt->fetchAll(PDO::FETCH_COLUMN);
    echo json_encode($this->data);
}

その関数は次を返します。

["john@beatles.com","george@beatles.com","paul@beatles.com","ringo@beatles.com"]

繰り返しますが、これを明示的に行うと、フィルタリングが機能します。

    var emails = [
        "john@beatles.com",
        "george@beatles.com",
        "paul@beatles.com",
        "ringo@beatles.com"
    ];

    $( "#invitees" ).autocomplete({
          source:emails
    });

しかし、これはしません:

$( "#invitees" ).autocomplete({
    source:"/api/get/users"
});

ここで何が欠けていますか？

PS: ちなみに、これはメソッド C での洗練されていない試みです-「ajax コールバック」: (注: PHP から連想配列を受け入れることを意図していますが、ポイントは、「セルフフィルター」も行わないことです)

$( "#invitees" ).autocomplete({
    source: function(request,response){
        $.ajax({
            url:"/api/get/users",
            dataType:"json",
            data:{
                maxRows:5, // ? does not work
                //name_startsWith: request.term // ? does not work
            },
            error: function(xhr,status){
                alert(status);
            },
            success: function (data){
                // alert(data);
                response($.map(data,function (item){
                    return{
                        label: item.username,
                    };
                }));
            }
        });
    }
});
//ensures autocomplete is not set to "off"
$('input[name=invitees]').attr('autocomplete','on');

完全を期すために、ここに私のHTMLがあります：

<label for="invitees">Invite by email: </label>
<input id="invitees" name="invitees"/>
4

1 に答える 1

0

オートコンプリート関数をコールバック関数内に配置し、戻りデータをそれに渡すことができます。

例：

        $.getJSON('/myJSONdata', function(data) { 
             $( "#input_field" ).autocomplete({
            source: data
            });
        });

これにより、コールバックが完了した後に目的のフィールドにオートコンプリート関数が割り当てられ、関数に書き込まれたプレーン テキストのようにデータが割り当てられます。

オートコンプリート機能は、コールバックが正常に完了するまで明らかに機能しないため、覚えておく必要があります。

于 2014-02-27T22:45:36.893 に答える