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.
Here is my code:
<!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>
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.
Within the
autocomplete pluginin theselectfunction I added$('#tags').addTag(ui.item.label);instead of$( "#tags_tag" ).val( ui.item.label );like this:and it worked like a charm.