jQueryのUIのオートコンプリート - ではない外部の私は、次のオートコンプリートのためjQueryUIコードを持ってデモ

Question

ような結果オーバーレイ内の画像、...

$(function() { 
     var updates = [ 

     { value: "URL", 
     label: "some text", 
     icon: "jqueryui_32x32.png"}; 
     ]; 

     $("input#autocomplete").autocomplete({ 
       delay: 10, 
       minLength: 0,           
     source: updates,   
     select: function(event, ui) { 
       window.location.href = ui.item.value; 
     } 
    }); 
}); 

そして、それは本質的な結果は直接リンクしているサイトの検索を生成。私は結果にローカルに格納されている画像を追加して、より大きな顔を模倣するようにしたいと思います。ユーザーに「カスタムデータ」デモを指示する前に私は運が無かったし、質問も見たことがありません。ここではそのような質問が...

How do I add images to results of this JQueryUI autocomplete plugin?

である私は承知しているか、このデモ...

http://jqueryui.com/demos/autocomplete/#custom-data

..but 1を約行く方法としてNOガイダンスはありません結果オーバレイをフォーマットする/オーバレイにイメージを置くことについては、これを詳細にしてください。私は本当にここで敗北しています。私は一日中このデモを解剖しましたが、何も表示されませんでした。すべてのデータと画像がローカルなので、これは簡単に行う必要があります。それらはすべてこの検索と同じフォルダにあります。ここで扱うPHPやデータベースはありません.....

jQuery UIは本当に本当に嫌いですが、それはどのように文書化されていないのか、どの程度不必要に複雑になっているのですか？複数のファイルなど....私は単純なHTMLタグを受け入れたJÖRNZAEFFERERのプラグインを使用していました。 IE8まではうまくいった......

これに関する洞察は非常に高く評価されています。

Answer 1

オートコンプリートの候補リストのリスト項目の表示を変更するには、_renderItemメソッドをオーバーライドすることをお勧めします。このメソッド内には、は、いくつかのことを行う必要があります。

1. はulに渡されたliを追加します。 liにはaタグが含まれている必要があります。
2. 適切なデータを関連付けます。li
3. 返信する返信はliです。

これ以外にも、任意のカスタムフォーマットロジックを実行できます。ここで私はあなたのコードを更新してしまう方法は、次のとおりです。

$("input#autocomplete").autocomplete({ 
    delay: 10, 
    minLength: 0,           
    source: updates,   
    select: function(event, ui) { 
     window.location.href = ui.item.value; 
    } 
}).data("autocomplete")._renderItem = function (ul, item) { 
     return $("<li />") 
      .data("item.autocomplete", item) 
      .append("<a><img src='" + item.icon + "' />" + item.label + "</a>") 
      .appendTo(ul); 
}; 

あなたが見ることができるように、imgタグを追加すると、上記のaタグの内側にそれを置くことと同じくらい簡単でした。追加するアイテムにもCSSルールを適用することができます。

Here's a complete example StackOverflowのAPIを使用してユーザーを検索し、その左側にアバターを表示します。

---

更新は：jQueryUI 1.10の時点で、あなたは（問題@Dannyを気付いてくれてありがとう）.data("uiAutocomplete")を使用してオートコンプリートのためのウィジェットのデータにアクセスする必要があります。それを念頭に置いて、ここでは1で働いている例があります。10：

$("input#autocomplete").autocomplete({ 
    delay: 10, 
    minLength: 0,           
    source: updates,   
    select: function(event, ui) { 
     window.location.href = ui.item.value; 
    } 
}).data("uiAutocomplete")._renderItem = function (ul, item) { 
     return $("<li />") 
      .data("item.autocomplete", item) 
      .append("<a><img src='" + item.icon + "' />" + item.label + "</a>") 
      .appendTo(ul); 
}; 

例：http://jsfiddle.net/K5q5U/249/