jqueryUiのオートコンプリート - カスタムデータと表示

Question

私の完全なコードここにある：http://jsfiddle.net/HfNk9/13/

私は、この例jqueryUi autocomplete - custom data and displayに探しています。

project = [ 
    { 
     name: 'bar', 
     value: 'foo', 
     imgage: 'img.png' 
    } 
] 

私はsource = projectを設定した場合、オートコンプリートがproject.valueなくproject.nameを参照：

はのは異なっており、それはこのようになりますオブジェクトのプロジェクトを想定してみましょう。
この動作をどのように変更する必要がありますか？

---

var autocomplete = function(element, data) { 
    var fixtures = [ 
     { 
     avatar: "http://www.placekitten.com/20/20", 
     name: 'aaaaaaaaa', 
     value: 'bbbbbbbbb'} 
    ]; 

    element.autocomplete({ 
     minLength: 3, 
     source: function(request, response) { 
      var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i"); 
      response($.grep(fixtures, function(value) { 
       return matcher.test(value.name); 
      })); 
     }, 
     create: function() { 
      console.log(fixtures) 
      element.val(fixtures.name); 
     }, 
     focus: function(event, ui) { 
      element.val(ui.item.name); 
      return false; 
     }, 
     select: function(event, ui) { 
      element.val(ui.item.name); 
      return false; 
     } 
    }).data('autocomplete')._renderItem = function(ul, item) { 
     return $('<li></li>') 
      .data('item.autocomplete', item) 
      .append('<a><img src="' + item.avatar + '" />' + item.name + '<br></a>') 
      .appendTo(ul); 
    }; 
}; 

autocomplete($('#auto')); 

私の完全なコード：http://jsfiddle.net/HfNk9/13/

Answer 1

は、あなたが気づいたようです（デフォルトでオンに検索：あなたの代わりにvalueのnameの値を使用したいなら、あなたはこのような何かをするだろうnameまたはvalue）。

あなたがソースとして配列の代わりに関数を使用すると、独自のフィルタリングを行うことができる方法：

element.autocomplete({ 
    minLength: 3, 
    source: function(request, response) { 
     var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i"); 
     response($.grep(fixtures, function(value) { 
      return matcher.test(value.name); 
     })); 
    }, 
    create: function() { 
     console.log(fixtures) 
     element.val(fixtures.name); 
    }, 
    focus: function(event, ui) { 
     element.val(ui.item.name); 
     return false; 
    }, 
    select: function(event, ui) { 
     element.val(ui.item.name); 
     return false; 
    } 
}).data('autocomplete')._renderItem = function(ul, item) { 
    return $('<li></li>') 
     .data('item.autocomplete', item) 
     .append('<a><img src="' + item.avatar + '" />' + item.name + '<br></a>') 
     .appendTo(ul); 
}; 

例：http://jsfiddle.net/QzJzW/

Answer 2

あなたはselectプロパティを使用する必要があります。

$("...").autocomplete({ 
    source: ..., 
    select: function(event, ui) { //when an item is selected 
     //use the ui.item object 
     alert(ui.item.name) 
     return false; 
    } 
}); 

Answer 3

答えはあなたにリンクしたページのソースコードです。

あなたはオートコンプリートウィジェットとは異なる性質にフィルタリングする必要

$("#input").autocomplete({ 
    minLength: 0, 
    source: projects, 
    focus: function(event, ui) { 
     $("#input").val(ui.item.value); 
     return false; 
    }, 
    select: function(event, ui) { 
     $("#input").val(ui.item.value); 
     return false; 
    } 
}) 
.data("autocomplete")._renderItem = function(ul, item) { 
    return $("<li></li>") 
     .data("item.autocomplete", item) 
     .append("<a>" + item.name + "</a>") 
     .appendTo(ul); 
};