分类导航

jQuery 发布时间：2022-04-19 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了jquery-ui – Jquery UI自动完成和标记插件(XOXCO)合并问题，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

我一直使用 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自动完成.

因此,您只需将_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,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.这是Autocomplete插件所附加的元素.然后,您可以简单地覆盖_renderItem：

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