jQueryのオートコンプリート -

Question

をリスト結果のカスタムHTML私はこのプラグインを参照しています：http://jqueryui.com/demos/autocomplete/

ので、結果を得るために元の構造は、私がこのような何かを見るために内部リンクを作成する必要があり

<ul class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all"> 
    <li class="ui-menu-item"> 
    <a class="ui-corner-all">item 1</a> 
    </li> 
    <li class="ui-menu-item"> 
    <a class="ui-corner-all">item 2</a> 
    </li> 
    <li class="ui-menu-item"> 
    <a class="ui-corner-all">item 3</a> 
    </li> 
</ul> 

です：

<a class="myclass" customattribute="something"> The item </a> 

私はサイト上のすべてのオートコンプリートのために同じフォーマットをしたくないので、それはプラグインを編集することが私の唯一の解決策を教えないでください。この例に示すように

$("selector").autocomplete({ ... }) 
    .data("autocomplete")._renderItem = function(ul, item) { 
     return $("<li></li>") 
      .data("item.autocomplete", item) 
      .append("<a class='myclass' customattribute='" + item.customattribute + "'>" + item.label + "</a>") 
      .appendTo(ul); 
    }; 

が

を（あなたのsourceでitemsがcustomattributeと呼ばれる性質を持っていると仮定します）：：http://jqueryui.com/demos/autocomplete/#custom-dataあなたは（問題のオートコンプリート用）_renderItem方法を交換する必要が

Answer 1

Answer 2

イベントを「開く」に設定して属性を追加できます。

$(".selector").autocomplete({ 
    open: function(event, ui) { 
     var jArrEl = $("a.ui-corner-all"); 
     jArrEl.addClass("myclass"); 
     jArrEl.attr("customattribute","something"); 
    } 
}); 

Answer 3

これは、jquery-uiのオートコンプリートのドキュメントJquery-autocompleteにも記載されています。

トリックである：

1. 用途このjQueryの拡張：github Code

2. そしてオートコンプリートオプションのパスで

   html:true 
   
   ...autocomplete({ 
   ... 
   html:true 
   ... 
   } 
   

   ）。

3. 今、あなたは、オートコンプリートのためのJSON出力の "ラベル" フィールドにHTML（のような<のdiv >サンプル</DIV >）を渡すことができます。

あなたはjQueryのにプラグインを追加する方法がわからない場合は

：JSファイル内

1. 保存プラグイン（スコット・ゴンサレス」htmlの拡張子）やJSファイルをダウンロードしてください。
2. すでにjquery-uiオートコンプリートスクリプトがhtmlページ（またはjquery-ui jsファイル）に追加されています。このプラグインスクリプトは、その自動完成のjavascriptファイルの後に追加してください。

掲載日：2013年7月28日