jQueryオートコンプリートwith画像

Question

私のウェブサイトに画像を含むオートコンプリート機能を実装したいと思います。

jQueryオートコンプリートプラグインを使用したいと思います。

私はサンプルコードを見ました。

は、誰もが次のコードは、$（ドキュメント）.ready（）イベントで何を意味するのか私に説明できます：私は、テキストボックス内のいくつかの文字を入力するとき

$("#imageSearch").autocomplete("images.php", { 
    width: 320, 
    max: 4, 
    highlight: false, 
    scroll: true, 
    scrollHeight: 300, 
    formatItem: function(data, i, n, value) { 
    return "<img src='images/" + value + "'/> " + value.split(".")[0]; 
    }, 
    formatResult: function(data, value) { 
    return value.split(".")[0]; 
    } 
}); 

私の究極の要件があるが、私はのオプションをしたいですそれに関連する画像が付いてくる。

Answer 1

は、参照のためにこれを使用します。http://api.jqueryui.com/autocomplete/

---

$("#imageSearch").autocomplete("images.php", { 

は、すべてのフィールド#imageSearchにオートコンプリートをpluging適用します。最初のパラメータ私は入力されたものに基づいてレスポンスを生成するページ（images.php）を推測します。

 width: 320, 

 max: 4, 

最大の提案

 highlight: false, 

リストのハイライト真/偽

 scroll: true, 

スクロールバー別名ドロップダウン種類ドロップダウンの幅に、または下のちょうど長いdiv。

 scrollHeight: 300, 

オートコンプリートドロップの高さ。 images.phpから返された応答をフォーマットする方法

 formatItem: function(data, i, n, value) { 
      return "<img src='images/" + value + "'/> " + value.split(".")[0]; 
     }, 

。

 formatResult: function(data, value) { 
      return value.split(".")[0]; 
     } 

ユーザーが選択肢のいずれかを選択する場合、値を返す方法。

}); 

閉じ括弧：P

Answer 2

これはjqueryのオートコンプリートプラグインについてであるが、実際のjqueryのUIオートコンプリートでformatItemとformatValueとしてそのようなオプションはありません。

古いプラグインのバージョンから正式なUIウィジェットに移行する方法を説明しているこのhttp://www.learningjquery.com/2010/06/autocomplete-migration-guideを読む人にお勧めします。

お勧めリストで画像を扱う自動補完取得するには、このスレッドを読んでください。http://forum.jquery.com/topic/using-html-in-autocomplete