JQuery UI autocomplete + tag插件(XOXCO)：选择时不添加标签
JQuery UI autocomplete + tag插件(XOXCO)：选择时不添加标签
提问于 2018-05-27 04:18:37
我的问题是当一起使用Jquery UI autocomplete和tag plugin (XOXCO)时，一旦我select其中一个自动完成的建议，它应该立即添加标签，但发生的是，一旦选择，建议消失了，虽然value被正确地写入到tags-id输入仍然label本身不会显示为标签，除非我按enter，如果我不这样做，那么标签将不会被正确添加。
我想我应该告诉标记插件，一旦我从自动完成插件触发select事件，就去创建标记。但是我做不到。
下面是我的代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Search Locations</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="css/jquery.tagsinput.min.css" />
<style>body { font-family: Arial, Helvetica, sans-serif;}
table {font-size: 1em;}
.ui-draggable, .ui-droppable {background-position: top;}
.ui-autocomplete { line-height:24px; }
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-state-active.ui-button:hover
{ border: 1px solid #000; background: #000; }
.ui-menu-item { margin: 0; padding: 0; zoom: 1; float: left; clear: left; width: 100%; }
.ui-autocomplete li.ui-menu-item { padding: 1px; width:350px; }
.ui-menu-item a { text-decoration: none; display: block; padding: .2em .4em; line-height: 1.5; zoom: 1; }
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="js/jquery.tagsinput.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$( "#tags" ).tagsInput({
width: 'auto',
interactive:true,
defaultText:'add a piece of data',
});
$( "#tags_tag" ).autocomplete({
minLength: 2,
source: function (request, response) {
$.ajax({
url: "xxxtestjsondata77.asp",
data: {term:request.term},
type: 'GET',
contentType: "application/json; charset=utf-8",
dataType: 'json',
success: function (data) {
response(data);
} // close success
}); // close ajax
}, // close source,
select: function( event, ui ) {
$( "#tags_tag" ).val( ui.item.label );
$( "#tags-id" ).val( ui.item.value );
return false;
},
focus: function( event, ui ) {
$( "#tags_tag" ).val( ui.item.label );
return false;
}
});
$( "#tags_tag" ).autocomplete( "instance" )._renderItem = function( ul, item ) {
var term = this.element.val(),
regex = new RegExp( '(' + term + ')', 'gi' );
t = item.label.replace( regex , "<b>$&</b>" );
return $( "<li>" )
.append( "<a>" + t + " | " + item.desc + "</a>")
.appendTo( ul );
};
} ); // close document
</script>
</head>
<body>
<h1>Add Data</h1>
<div class="ui-widget">
<label for="tags" type="text">Tags: </label>
<input name="tags" id="tags" />
<input type="hidden" id="tags-id">
</div>
</body>
</html>JSON文件数据的一部分(xxxtestjsondata77.asp)：
[
{ "label": "Data 1", "desc":"Data 1 desc", "value":"111" } ,
{ "label": "Data 2", "desc":"Data 1 desc", "value":"222" } ,
{ "label": "Data 3", "desc":"Data 1 desc", "value":"333" } }
]回答 1
Stack Overflow用户
回答已采纳
发布于 2018-05-29 08:36:58
我找到了答案，并将其添加到这里，以供任何想要了解它的人使用。
在select函数的autocomplete plugin中，我添加了$('#tags').addTag(ui.item.label);而不是$( "#tags_tag" ).val( ui.item.label );，如下所示：
select: function( event, ui ) {
$('#tags').addTag(ui.item.label);
$( "#tags-id" ).val( ui.item.value );
return false;
},它就像一个护身符一样起作用。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50546680
复制相关文章
相似问题
腾讯云开发者
