Jquery UI 自动完成和标签插件（XOXCO）合并问题答案

【问题标题】：Jquery UI autocomplete and tag plugin (XOXCO) merging issueJquery UI 自动完成和标签插件（XOXCO）合并问题
【发布时间】：2012-03-08 11:37:00
【问题描述】：

我一直在使用 jquery 自动完成功能，直到现在都没有问题。我想创建一个标签系统（比如stackoverflow中的那个）。

为此，我使用了两个插件：

Jquery UI (http://jqueryui.com/demos/autocomplete/)
Xoxco (http://xoxco.com/projects/code/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 显示找到的数据的方式（使其不仅仅显示标签）。如果你没有同时使用这两个插件（比如你只使用自动完成），这很容易，你只需这样做：

$( "#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。

所以我的问题是：

自动补全和标签插件合并时如何使用数据渲染功能？

由于我认为数据不能作为自动完成选项提供，因此我不能将其推高。有什么想法吗？

P.S：如果你知道如何使用与 xoxco 不同的插件来做到这一点，请告诉我。谢谢！

【问题讨论】：

标签： jquery-ui plugins jquery-plugins tags jquery-autocomplete

【解决方案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);
};

【讨论】：