web-dev-qa-db-ja.com

jqueryオートコンプリート-結果リストのカスタム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>

サイト上のすべてのオートコンプリートに同じ形式を使用したくないので、プラグインを編集するための唯一の解決策を教えないでください。

jqueryjquery-uiautocompletejquery-ui-autocomplete
24
odle

_renderItemメソッドを置き換える必要があります（問題のオートコンプリートの場合）：

$("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 );
   };

（itemsのsourceにcustomattributeというプロパティがあると仮定します）

この例に示すように、 http://jqueryui.com/demos/autocomplete/#custom-data

40
Andrew Whitaker

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

トリックは：

  1. このjquery拡張機能を使用します： github Code

  2. 次に、オートコンプリートオプションパスで

    html:true

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

    ）;

  3. これで、HTML（<div> sample </ div>など）をJSON出力の「label」フィールドに渡してオートコンプリートすることができます。

プラグインをJQueryに追加する方法がわからない場合：

  1. プラグイン（ScottGonzálezのhtml拡張）をjsファイルに保存するか、jsファイルをダウンロードします。
  2. Htmlページ（またはjquery-ui jsファイル）にjquery-uiオートコンプリートスクリプトをすでに追加しています。このオートコンプリートJavaScriptファイルの後にこのプラグインスクリプトを追加します。

投稿日：2013年7月28日

4
Wasiq

イベント「open」で属性を追加してみることができます。

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

新しいバージョンのオートコンプリートにはcreateイベントを使用できます。このような：

create: function () {
            $(this).data('ui-autocomplete')._renderItem = function (ul, item) {
                var path = 'basepath' + item.value;
                return $('<li class="divSelection">')
                    .append('<div>')
                    .append('<img class="zoom" src="' + path + '" />')
                    .append('<span>')
                    .append(item.label)
                    .append('</span>')
                    .append('</div>')
                    .append('</li>')
                    .appendTo(ul); // customize your HTML
            };
        }

完全なコードレビューのために、オートコンプリートをバインドする方法をテキストボックスに添付しています。

$('.myTextBox').autocomplete({
        source: function (request, response) {

            // your call to the server
        },
        select: function (event, ui) {
            // when item is selected
            $(this).val(ui.item.label);
        },
        create: function () {
            $(this).data('ui-autocomplete')._renderItem = function (ul, item) {
                var path = 'basepath' + item.value;

                 return $('<li class="divSelection">')
                    .append('<div>')
                    .append('<img class="zoom" src="' + path + '" />')
                    .append('<span>')
                    .append(item.label)
                    .append('</span>')
                    .append('</div>')
                    .append('</li>')
                    .appendTo(ul); // customize your HTML
            };
        }
});
0
Jamshaid Kamran