Моя проблема в том, что при использовании 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" } }
]