このjqueryオートコンプリートスクリプトに画像を含めるにはどうすればよいですか？私が興味を持って

Question

$("#shout_field").live('keydown', function (event) { 
     if (event.keyCode === $.ui.keyCode.TAB && $(this).data("autocomplete").menu.active) { 
      event.preventDefault(); 
     } 
    }).autocomplete({ 
     minLength: 0, 
     source: function (request, response) { 
      var term = request.term, 
       results = []; 
      if (term.indexOf("@") >= 0) { 
       term = extractLast(request.term); 
       if (term.length >= 2) { 
        $.ajax({ 
         type: "POST", 
         url: "/data/people.asp", 
         dataType: "json", 
         data: { 
          term: term 
         }, 
         error: function (xhr, textStatus, errorThrown) { 
          alert('Error: ' + xhr.responseText); 
         }, 
         success: function (data) { 
          response($.map(data, function (c) { 
           return { 
            id: c.id, 
            label: '<b>' + c.img + '</b>' + c.label, 
            value: c.value 
           } 
          })); 
         } 
        }); 
       } else { 
        results = ['Type someones name to tag them in the status...']; 
       } 
      } 
      response(results); 
     }, 
     focus: function() { 
      // prevent value inserted on focus 
      return false; 
     }, 
     select: function (event, ui) { 
      var terms = split(this.value); 

      // remove the current input 
      terms.pop(); 
      // add the selected item 
      terms.push(ui.item.value); 
      // add placeholder to get the comma-and-space at the end 
      terms.push(""); 
      this.value = terms.join(""); 

      $('body').data('tagged', this.value) 

      var tagged_users = $("#tagged_users").val(); 
      $("#tagged_users").val(tagged_users + ui.item.id + ',') 

      return false; 
     } 
    }); 

私は通常、それを行うが、私は混乱していますリモート呼び出しからのオートコンプリートを持つことができます... :(

ビットはc.imgが<b>タグである部分であり、それはにISN HTMLのように「トンレンダリング...

Answer 1

あなたはプラグインのプライベートメソッド_renderItem()をオーバーライドする必要があります。
を各項目を表示するために、この関数が呼び出される。

最初の引数はトンを表し彼はプラグインがメニューを表示するために作成する要素<ul>を作成します。 2番目の引数は現在のデータ項目です。

デフォルトでは、プラグインは<ul>を生成しますので、オーバーライドした_renderItem()には<li>を作成する必要がありますが、その中に何かを入れることができます。あなたは、単に再定義し、

return { 
    id: c.id, 
    label: c.label, 
    imgUrl: c.img, 
    value: c.value 
} 

は、カスタムのレンダリング方法を実装するには：あなたのケースのために

は、私はそれはそれはすべてが離れていた方が良いですので、データを格納するだけだ、silghtly異なるアレイのデータオブジェクトを返しますプラグインインスタンスの新しい関数です。これはどのように作動しますか ？

• あなたは

• など、プラグインがインスタンス化し
  1. が必要なマークアップを生成し$('#myelement').autocomplete()を呼ぶ名「オートコンプリート」
     
     
  下jqueryのデータとして要素 #myelementにプラグインのインスタンスを追加します。

• プラグインのインスタンスには、doinグラム$('#myelement').data('autocomplete');

• あなたはその後、これが与える_renderItem

方法のための新しい関数を定義することができます：私が何を参照できるように、上記の私のコードでこれを置くことができるだろう

$("#shout_field").autocomplete({ 
    ... 
}) 
.data('autocomplete') // get the instance of the plugin 
._renderItem = function(ul, item) { // change the _renderItem method 

    // "item" is the current data item, so { id, label, imgUrl, value } 


    return $("<li></li>") // generate a <li> element 

      // store the data item (used by the plugin) 
      .data("item.autocomplete", item) 

      // create the display you want into the <li> 
      .append('<img src="' + item.imgUrl + '" />' + '<a>' + item.label + '<br>' + item.desc + '</a>') 

      // add the <li> to the list 
      .appendTo(ul); 

};