0

私の問題は、Jquery UI autocompleteと をtag plugin (XOXCO)一緒に使用する場合selectです。オートコンプリートの提案の 1 つをすぐに追加する必要がありますが、選択すると提案が消え、入力に正しくvalue書き込まれているにもかかわらず、それ自体が表示されません。を押さない限りタグとして、押さないとタグが正しく追加されません。 オートコンプリートプラグインから選択イベントをトリガーしたら、タグプラグインに先に進んでタグを作成するように指示する必要があると思います..しかし、私はそれを成し遂げることができません.tags-idlabelenter

これが私のコードです：

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

1 に答える 1

0

答えを見つけたので、知りたい人のためにここに追加します。

次のようにではなく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;
               },

そしてそれは魅力のように機能しました。

于 2018-05-29T00:36:57.610 に答える