9

jquery-ui-autocomplete (実際には、検索ボックスに接続されたcatcomplete ) を使用しています。静的に定義されたアイテムの配列をソースとして使用する限り、うまく機能します。

パフォーマンス上の理由から、オートコンプリートで PHP スクリプトに Ajax リクエストを送信して、%like% リクエストを MySQL に送信することは望ましくありません。そこで、DB から JSON ファイルを生成しました。これには、検索で一致するすべてのアイテム (多くの SQL テーブルからの約 20 ～ 30 アイテム) が含まれています。ページが読み込まれたとき、またはユーザーが検索ボックスに入力を開始したときに、ファイルを一度だけ読み取り/解析したいと思います。

私はここで立ち往生しています。 .catcomplete() (以下のコード) に Ajax 呼び出しをアタッチしようとしました。また、getJSON 呼び出しを行い、success() メソッドで .catcomplete を作成しようとしました。 どちらの方法も静かに失敗します。

私は JS/jQuery に慣れていないので、すでに気に入っていますが、少し迷っています。有用なドキュメントへのヘルプ/ソリューション/ポインタは大歓迎です。

どうもありがとうございました！

HTML は次のとおりです: (非常にシンプル)

<form id="searchform" method="get" role="search">
    <input id="searchfield" />
    <input type="submit" name="go" value="go!" />
</form>

ここに私のJSコードがあります:

$( "#searchfield" ).catcomplete({
delay: 0,
source: function( request, response ) {
    $.ajax({
        url: "/path/to/cache.json",
        dataType: "json",
        data: {term: request.term},
        success: function(data) {
            response($.map(data, function(item) {
                return {
                    label: item.label,
                    category: item.category,
                    desc: item.desc
                };
            }));
        }
    });
},
minlength:0
});

サンプルの JSON データ:

[
{ label: "lbl1", category: "cat1", desc: "desc1"}, 
{ label: "lbl2", category: "cat1", desc: "desc2"}, 
{ label: "lbl3", category: "cat1"}
]
4

2 に答える 2

10

ひっくり返してみてください。ページの読み込み時に一度取得してから、オートコンプリートをインスタンス化します。

$(function() {
    $.ajax({
        url: "/path/to/cache.json",
        dataType: "json",
        data: {term: request.term},
        success: function(data) {
            var cat_data = $.map(data, function(item) {
                return {
                    label: item.label,
                    category: item.category,
                    desc: item.desc
                };
            });
            $("#searchfield").catcomplete({
                delay: 0,
                source: cat_data,
                minlength:0
            });
        }
    });
});
于 2013-03-29T01:29:02.837 に答える
9

json 形式が適切ではないため、データソースは解析エラーをスローしています。json では、キーも で囲む必要があります"。

{
  "list" : [{
                "label" : "lbl1",
                "category" : "cat1",
                "desc" : "desc1"
            }, {
                "label" : "lbl2",
                "category" : "cat1",
                "desc" : "desc2"
            }, {
                "label" : "lbl3",
                "category" : "cat1"
            }]
}

デモ:プランカー

リクエスト用語ベースの検索が必要な場合は、さらに変更を加える必要があります

  var xhr;
  $( "input" ).catcomplete({
    delay: 0,
    source: function( request, response ) {
      var regex = new RegExp(request.term, 'i');
      if(xhr){
        xhr.abort();
      }
      xhr = $.ajax({
          url: "data.json",
          dataType: "json",
          cache: false,
          success: function(data) {
            response($.map(data.list, function(item) {
              if(regex.test(item.label)){
                return {
                    label: item.label,
                    category: item.category,
                    desc: item.desc
                };
              }
            }));
          }
      });
    },
    minlength:0
  });

デモ:プランカー

于 2013-03-29T01:53:18.807 に答える