Question

我的问题是在一起使用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" } } 
]

Answer 1

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

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

它就像一个魅力。

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

1 个答案: