Jquery UIオートコンプリートとタグプラグイン（XOXCO）のマージの問題

Question

jqueryオートコンプリートを今まで問題なく使用していました。私はタグシステム（stackoverflowのものなど）を作成したい。このため

が、私は2つのプラグインを使用しています：

• のjQuery UI（http://jqueryui.com/demos/autocomplete/）
• Xoxco（http://xoxco.com /プロジェクト/コード/ tagsinput /）

私はそれがこのコードを使用して実行すると作業があります。

$('#related_tags').tagsInput({ 
    autocomplete_url : 'live_search.php', 
    autocomplete : { 
      minLength: 3, 
      delay: 150, 
      //DATA AS OPTION?? 
    }, 
    'height':'30px', 
    'width':'auto', 
    'removeWithBackspace' : true, 
    'minChars' : 3, 
    'maxChars' : 200, 
    'placeholderColor' : '#666666' 
}); 

しかし、livesearchが見つけたデータを表示する方法を変更する必要があります（ラベルだけを表示するだけではありません）。あなたはそれが簡単だ（あなただけのオートコンプリートを使用すると言う）一緒にこれらの2つのプラグインを使用していない場合、あなたはこのような何か：

$("#related_tags").autocomplete({ 
     source: 'live_search.php', 
     minLength: 3, 
     delay: 150 
}) 
.data("autocomplete")._renderItem = function(ul, item) { 
     return $("<li></li>") 
      .data("item.autocomplete", item) 
      .append("<a href='item.php'>" + item.label + " " + item.surname + "<span style='color:#003399;'>" + item.p_name + "</span></a>") 
      .appendTo(ul); 
}; 

あなたが見ることができるように、私はアイテムのラベルを表示していないですが、私も午前姓とp_nameを表示します。

だから私の質問は次のとおりです。一緒にオートコンプリートとタグプラグインをmerginときに、データのレンダリング機能を使用するにはどうすればよい

---

？

---

は以来、私は、データが、私はちょうどテレをそれをプッシュすることはできませんオートコンプリートオプションとして使用できませんと信じています。何か案は？

P.S：xoxcoとは別のプラグインを使用してこれを行う方法が分かっている場合は、とにかく教えてください。ありがとう！

Answer 1

プラグインは、プラグインがjqueryオートコンプリートを添付する非表示の入力を使用して動作します。

単純なオートコンプリート入力の場合と同様に、_renderItemをその入力入力フィールドにオーバーライドするだけで済みます。

DEMO

---

あなたは（ウェブサイトのプラグイン上の例から）以下の入力にtagsInputプラグイン適用するのであれば：

<input name="tags" id="tags" value="foo,bar,baz" />​ 

$('#tags').tagsInput({ 
    autocomplete_url: 'some url' 
}); 

をあなたは終わらアップ後に生成してマークアップ：

<input name="tags" id="tags" value="foo,bar,baz" style="display: none; "> 
<div id="tags_tagsinput" class="tagsinput" style="width: 300px; height: 100px; "> 
    <span class="tag"><span>foo&nbsp;&nbsp;</span><a href="#" title="Removing tag">x</a></span><span class="tag"><span>bar&nbsp;&nbsp;</span><a href="#" title="Removing tag">x</a></span><span class="tag"><span>baz&nbsp;&nbsp;</span><a href="#" title="Removing tag">x</a></span><div id="tags_addTag"> 

    <input id="tags_tag" value="" data-default="add a tag" style="color: rgb(102, 102, 102); width: 80px; " class="ui-autocomplete-input" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true"></div> 

    <div class="tags_clear"></div> 
</div> 

入力フィールドtags_tagを参照してください。これは、オートコンプリートプラグインが接続されている要素です。 _renderItemを単に上書きすることができます。

$('#tags_tag') 
    .data('autocomplete') 
    ._renderItem = function(ul, item) { 
     return $("<li></li>") 
      .data("item.autocomplete", item) 
      .append("<a href='item.php'>" + item.someProperty + "</a>") 
      .appendTo(ul); 
};​