JQuery UI autocomplete与XOXCO标签插件：选中建议后标签未自动添加

我之前也碰到过这个问题！核心原因是XOXCO的Tags Input插件默认只会在你按下回车或者逗号的时候才会把输入框里的内容转换成标签，而jQuery UI Autocomplete的select事件只是帮你把选中的label填到输入框里，并没有触发插件的标签创建逻辑。

解决方案：在Autocomplete的select事件中主动调用Tags Input的addTag方法 #

你只需要修改Autocomplete配置里的select回调函数，直接调用插件提供的addTag方法来添加选中的标签，同时处理隐藏域的value值，最后清空输入框即可。

修改后的关键代码片段：

select: function( event, ui ) {
    // 调用Tags Input的addTag方法直接添加选中的标签
    $( "#tags" ).addTag(ui.item.label);
    
    // 处理隐藏域的value（支持多个标签用逗号分隔）
    var currentIds = $( "#tags-id" ).val();
    var newIds = currentIds ? currentIds + ',' + ui.item.value : ui.item.value;
    $( "#tags-id" ).val(newIds);
    
    // 清空输入框，避免残留文本
    $( "#tags_tag" ).val('');
    
    // 阻止Autocomplete的默认行为，防止输入框被重新填充
    return false;
},

完整的修改后代码 #

<!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" ).addTag(ui.item.label);
    
    // 更新隐藏域的ID值（支持多个标签用逗号分隔）
    var currentIds = $( "#tags-id" ).val();
    var newIds = currentIds ? currentIds + ',' + ui.item.value : ui.item.value;
    $( "#tags-id" ).val(newIds);
    
    // 清空输入框
    $( "#tags_tag" ).val('');
    
    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>

补充说明 #

• addTag是XOXCO Tags Input插件提供的核心方法，专门用来手动添加标签，你可以直接通过插件初始化后的DOM元素调用它。
• 隐藏域的value处理我做了逗号分隔的逻辑，这样当你添加多个标签时，后台可以通过拆分逗号来获取所有选中的ID。
• 一定要清空tags_tag输入框并返回false，否则Autocomplete会把选中的label重新填回输入框，造成重复内容。

内容的提问来源于stack exchange，提问作者Code Reaper