JQuery UIのオートコンプリート - 異なるデータの表示と検索

Question

jquery UIオートコンプリートの操作方法を簡単に変更する必要があります。

は現在、私は、次の形式のオブジェクトとソースプロパティを提供しています：私の例とタイトルとして

{label: "Display This", value: "Search This", other: "This is some other random data"} 

を示唆して、私はへのどのユーザがタイプよりも、ドロップダウンで異なるデータを表示したいですの検索。これはどのように可能ですか？私はむしろJoe Schmoeのプラグインを使用したくないです。

ありがとうございます！

Answer 1

は、ここで（ローカルデータソースを想定して）あなたがこれを行うことが一つの方法です：

var source = [{label: "Display This", value: "Search This", other: "This is some other random data"}]; 

$("#auto").autocomplete({ 
    source: function(request, response) { 
     var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i"); 
     response($.grep(source, function(value) { 
      return matcher.test(value.value); 
     })); 
    } 
}); 

例：http://jsfiddle.net/dHFk8/リモートを使用している場合

（ "検索" を検索してください）データソースを使用すると、サーバー側のコードで検索ロジックを自由に実行できます。

Answer 2

「ソース」メソッドでajax呼び出しを実装できます。この呼び出しの成功メソッドでは、response（）でマップを作成できます。そして、あなたは、「ラベル」と「値」プロパティを設定することができます。これは、（未テスト）動作するかもしれ

：

// sample data returned from ajax call 
var sampleData = [ 
    { label: 'test label', value: 'test value' }, 
    { label: 'test label1', value: 'test value1' }, 
    { label: 'test label2', value: 'test value2' }, 
    { label: 'test label3', value: 'test value3' } 
]; 
response($.map(sampleData, function (item) { 
    return { 
     label: item.label, 
     value: item.value 
    } 
}));