我的问题是在一起使用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" } }
]
答案 0 :(得分:0)
我找到了答案,我在这里为任何想要了解它的人添加。
在autocomplete plugin
函数的select
内,我添加了$('#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;
},
它就像一个魅力。