Jquery ui Jquery UI自动完成和标记插件(XOXCO)合并问题
到目前为止,我已经使用jqueryautocomplete一段时间了,没有任何问题。我想创建一个标签系统(比如stackoverflow中的标签系统) 为此,我使用了两个插件:Jquery ui Jquery UI自动完成和标记插件(XOXCO)合并问题,jquery-ui,plugins,jquery-plugins,tags,jquery-autocomplete,Jquery Ui,Plugins,Jquery Plugins,Tags,Jquery Autocomplete,到目前为止,我已经使用jqueryautocomplete一段时间了,没有任何问题。我想创建一个标签系统(比如stackoverflow中的标签系统) 为此,我使用了两个插件: Jquery用户界面(http://jqueryui.com/demos/autocomplete/) Xoxco(http://xoxco.com/projects/code/tagsinput/) 我使用以下代码使其运行和工作: $('#related_tags').tagsInput({ autocom
- Jquery用户界面(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显示找到的数据的方式(这样它就不会只显示标签)。如果您不同时使用这两个插件(比如您只使用autocomplete),这很简单,您只需执行以下操作:
$( "#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);
};
$(“#相关#标记”)。自动完成({
来源:“live_search.php”,
最小长度:3,
延误:150
})
.数据(“自动完成”)。\u renderItem=功能(ul,项目){
返回$(“”)
.data(“item.autocomplete”,item)
.附加(“”)
.附录(ul);
};
如您所见,我不仅显示了物品的标签,还显示了姓氏和p_名称
所以我的问题是:
将自动完成和标签插件放在一起时,如何使用数据呈现功能?
因为我认为数据不能作为自动完成选项使用,所以我不能把它推高。有什么想法吗
附言:如果你知道如何使用不同于xoxco的插件,请告诉我。谢谢 插件使用一种隐藏的输入,插件将jquery自动完成附加到该输入 因此,您只需将
\u renderItem
覆盖到该输入字段,就像您对简单的自动完成输入所做的那样
因此,如果您将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 </span><a href="#" title="Removing tag">x</a></span><span class="tag"><span>bar </span><a href="#" title="Removing tag">x</a></span><span class="tag"><span>baz </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')
.data('autocomplete')
._renderItem = function(ul, item) {
return $("<li></li>")
.data("item.autocomplete", item)
.append("<a href='item.php'>" + item.someProperty + "</a>")
.appendTo(ul);
};