JQuery UI自动完成+标签插件（XOXCO）：选择时不添加标签答案

【问题标题】：JQuery UI autocomplete + tag plugin (XOXCO) : tag is not added upon selectionJQuery UI自动完成+标签插件（XOXCO）：选择时不添加标签
【发布时间】：2018-05-26 20:18:37
【问题描述】：

我的问题是一起使用Jquery UI autocomplete 和tag plugin (XOXCO) 时，一旦我select 自动完成建议之一，它应该立即添加标签，但发生的情况是，在选择时，建议消失了，尽管value 被正确写入tags-id 输入，除非我按enter，否则label 本身不会显示为标签，如果我不按，则不会正确添加标签。
我想一旦我从自动完成插件触发选择事件，我应该告诉标签插件继续创建标签。但我无法完成它。

这是我的代码：

<!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" } } 
]

【问题讨论】：

欢迎来到 Stack Overflow。为什么要用<a> 包裹渲染的项目？我希望它用<div> 包裹起来。
@Twisty .. Thnx.. 实际上没有具体原因，我只是在 @cheeso 的答案中使用了autocomplete monkey-patching 的一些帮助link并且 _renderItem 变量被包裹在 anchor 而不是 div 中。
@Twisty .. 实际上 Jquery UI autocomplete 自己工作正常，tag plugin 自己工作正常.. 但是当我一起使用它们时，我需要tag plugin做一些不同的事情，即当用户从自动完成中选择一个建议而不是按下enter 键时添加标签.. 但我无法完成它。
我对这个标签插件不熟悉。由于您建议它在 Enter 被击中时起作用，我怀疑这是触发 change 或 submit 事件。由于您以编程方式填充该字段，因此不会执行 change。也许添加$("#tags-id").trigger("change");
啊~我终于做到了..我想颠倒了..我试图操纵tag plugin添加标签，但答案在autocomplete plugin中select函数我添加了$('#tags').addTag(ui.item.label); 而不是$( "#tags_tag" ).val( ui.item.label ); .. tada~ :)

标签： jquery jquery-ui jquery-plugins jquery-ui-autocomplete jquery-tags-input

【解决方案1】：

我找到了答案，我在这里为任何想知道它的人添加它。

在select 函数的autocomplete plugin 中，我添加了$('#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;
               },

它就像一个魅力。

【讨论】：