使用自定义 HTML 作为 Tag-it 自动完成的结果答案

【问题标题】：Using custom HTML as result of Tag-it Autocomplete使用自定义 HTML 作为 Tag-it 自动完成的结果
【发布时间】：2013-11-30 10:05:44
【问题描述】：

Tagit Jquery 插件的自动完成属性写成如下：

 autocomplete: {

                             source: function( request, response ) {
                             $.ajax({
                                 url: baseURL,
                                 dataType: "json",
                                 data: {
                                    query:request.term
                                 },
                                 success: function( data ) {
                                     response( $.map( data, function( item ) {
                                         return {
                                             label: item.label + "<br />" +item.description,
                                             value: item.label
                                         }
                                     }));
                                 }
                             });
                         }

所有工作正常，除了返回行，因为您看到 <br> 嵌入在项目的 Label 和 description 之间。 Tag-it 解析<br> 等纯文本的问题。

我读了 here：

如果您使用自定义 jQuery UI 构建，它必须包含核心，小部件、位置和自动完成组件。效果核心 “Blind”和“Highlight”效果组件是可选的，但在以下情况下使用可用。

而且我不知道如何设置自定义 HTML

更新：

知道如果是自动补全插件，我们可以使用：

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

但是，当我在 tag-it 插件上应用 .data("autocomplete")._renderItem 时，我得到了错误。

$('ul').tagit({autocomplete:{/*....*/}}).data("autocomplete")._renderItem=fn /*...*/

【问题讨论】：

标签： html autocomplete tag-it

【解决方案1】：

这对我有用

$('ul').find("input").data("uiAutocomplete")._renderItem = function (ul, item) { };

【讨论】：

关于这个方法的快速问题，我怎样才能再次绑定它事件的旧标签？
- 3 年前...所以，我现在不记得了.. 但是，我建议打开新问题并解释这个子问题。 @OrcusZ。

【解决方案2】：

我就是这样做的（我想放置一个图像标签）...在autocomplete 中添加以下（或根据您的需要）作为选项...

open: function( event, ui ) {
    //alert(ui);
    $('ul.tagit-autocomplete').find("li").each(function(index){
    var cur_html = $(this).html();

    var new_html = cur_html.replace('&lt;img', '<img');
    var new_html = new_html.replace('/&gt;', '/>');

    $(this).html(new_html);
    //console.log( index + ": " + $( this ).html() );
    });
    return true;
}

【讨论】：