Jquery UI自动完成和标记插件(XOXCO)合并问题

Question

我一直使用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.

所以我的问题是:

---

当自动完成和标签插件合并时,如何使用数据呈现功能？

---

由于我认为数据不能作为自动完成选项使用,所以我不能仅仅推动它.有任何想法吗？

PS:如果您确实知道如何使用与xoxco不同的插件,请告诉我.谢谢!

Answer 1

该插件使用一种隐藏输入，插件将 jquery 自动完成功能附加到该输入。

\n\n

因此，您只需覆盖_renderItem该输入输入字段，就像对简单的自动完成输入所做的那样。

\n\n

演示版

\n\n\n\n

因此，如果您将tagsInput插件应用于以下输入（来自网站插件上的示例）：

\n\n

<input name="tags" id="tags" value="foo,bar,baz" />\xe2\x80\x8b\n\n$(\'#tags\').tagsInput({\n    autocomplete_url: \'some url\'\n});\n

\n\n

您最终会得到以下生成的标记：

\n\n

<input name="tags" id="tags" value="foo,bar,baz" style="display: none; ">\n<div id="tags_tagsinput" class="tagsinput" style="width: 300px; height: 100px; ">\n    <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">\n\n    <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>\n\n    <div class="tags_clear"></div>\n</div>\n

\n\n

请参阅输入字段tags_tag。这是自动完成插件所附加的元素。然后您可以简单地覆盖_renderItem：

\n\n

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

\n