jQuery UI自动完成+标签插件(XOXCO):选择后未添加标签 [英] JQuery UI autocomplete + tag plugin (XOXCO) : tag is not added upon selection
问题描述
我的问题是当同时使用Jquery UI autocomplete和tag plugin (XOXCO)时，一旦我select一项自动完成建议，它应该立即添加标签，但是发生的是在选择之后，这些建议消失了，尽管除非我按enter键，否则value会正确地写入tags-id输入中，但label本身不会显示为标签，否则，该标签将不会正确添加.
我认为一旦触发自动完成插件的select事件，我应该告诉标签插件继续创建标签..但是我无法完成它.
My problem is when using Jquery UI autocomplete and tag plugin (XOXCO) together, once I select one of the autocomplete suggestions it should add the tag right away, but what happens is that upon the selection, the suggestions disappear and though the value is written to the tags-id input correctly still the label itself does not show as a tag unless I press enter, if I don't then the tag won't be added correctly.
I think I should tell the tag plugin to go ahead and create the tag once I trigger the select event from the autocomplete plugin.. but I'm not able to get it done.
这是我的代码:
<!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)的一部分:
part of the JSON File Data (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" } }
]
推荐答案
我找到了答案，并且在这里将其添加给想要知道它的任何人.
I found the answer, and I'm adding it here for anyone who would want to know it.
在select函数的autocomplete plugin中，我添加了$('#tags').addTag(ui.item.label);而不是$( "#tags_tag" ).val( ui.item.label );，像这样:
Within the autocomplete plugin in the select function I added $('#tags').addTag(ui.item.label); instead of $( "#tags_tag" ).val( ui.item.label ); like this:
select: function( event, ui ) {
$('#tags').addTag(ui.item.label);
$( "#tags-id" ).val( ui.item.value );
return false;
},
它就像一种魅力.
这篇关于jQuery UI自动完成+标签插件(XOXCO):选择后未添加标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
