jquery uiオートコンプリートウィジェットのCSS書式設定イメージ

Question

私は画像を表示するオートコンプリートウィジェットを持っています。現在私の結果はこのように見えます。

私は言葉「試験」と名「フェデリコ」または「ケーシーは」正しいお互いの上に、別の行に表示されるように私の結果を設定したいと思います。

これは、ウィジェットのための私のjavascriptのコードの関連する部分である：

) 
.data("autocomplete") 
._renderItem = function(ul, item) { 
    return jQuery("<li></li>") 
     .data("item.autocomplete", item) 
     .append("<a>" + "<img src='" + window.module.Globals.prototype.karma_assets + "images/_pricing_tables/best_deal.png' style='vertical-align:text-top;'/>" + item.id + " - " + item.label + "</a>") 
     .appendTo(ul); 
}; 

誰もがこれを達成するために、私の出力をフォーマットする方法を知っていますか？ありがとう！

Answer 1

ラップあなたが探してと<br />あなたはそれがしたいように動作することを可能にしているプッシュを作成する必要がdiv要素内のタグのテキスト部分を。 CSS3に準拠していますが、下位互換性があります。

.append("<a>" + "<img src='" + window.module.Globals.prototype.karma_assets + "images/_pricing_tables/best_deal.png' style='vertical-align:text-top; float: left;'/><div>" + item.id + " <br /> " + item.label + "</div></a>") 

Answer 2

.append("<a>" + "<img src='" + window.module.Globals.prototype.karma_assets + "images/_pricing_tables/best_deal.png' style='vertical-align:text-top; float: left;'/>" + item.id + " <br /> " + item.label + "</a>") 

これを試してみてください。..