jQuery UIオートコンプリート - 'source'の多次元配列値を使用して、キャッシュの例

Question

2次元JSONデータを受け入れるために、このjQuery UIの例を変更しようとしています。 http://jqueryui.com/demos/autocomplete/#remote-with-cache

var cache = {}, lastXhr; 
    $("#birds").autocomplete({ 
     minLength: 2, 
     source: function(request, response) { 
      var term = request.term; 
      if (term in cache) { 
       response(cache[ term ]); 
       return; 
      } 

      lastXhr = $.getJSON("search.php", request, function(data, status, xhr) { 
       cache[ term ] = data; 
       if (xhr === lastXhr) { 
        response(data); 
       } 
      }); 
     } 
    }); 

どのように私はこのようなJSONデータに '名前' の値を使用するためにこれを修正します：

[{"name":"TEST1","slug":"blah-blah"},{"name":"TEST","slug":"example-slug-here"}] 

Answer 1

をオートコンプリートウィジェットは、次の形式でデータを期待：

ローカルデータは単純な文字列配列でもよく、 オブジェクトを配列内の各項目に含めることができ、ラベルまたは値 のいずれかまたは両方のプロパティ。ラベルのプロパティは、 の提案メニューに表示されます。値がメニューから何かを選択した後に、入力要素に値が挿入されます。ただ一つの特性が指定されている場合、 は、それがために使用されます両方

（強調鉱山）

これは、あなたがそれに応答しないリモートソースを使用することはできませんという意味ではありませんフォーマット;付属のresponse機能を呼び出す前に、これらの要件に合わせてデータをマッサージすることができます。念頭に置いて

次のように、私はあなたのケースのための例を修正しますが：

lastXhr = $.getJSON("search.php", request, function(data, status, xhr) { 
    cache[ term ] = $.map(data, function(item) { 
     return { 
      label: item.name, 
      value: item.name, 
      slug: item.slug, 
      name: item.name 
     }; 
    }); 
    if (xhr === lastXhr) { 
     response(data); 
    } 
}); 

これは、結果が正しく表示され（とキャッシュがまだうまく動作するはずです）にする必要があります。別の例として、remote JSONP exampleをご覧ください。