首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >JQuery UI autocomplete + tag插件(XOXCO):选择时不添加标签

JQuery UI autocomplete + tag插件(XOXCO):选择时不添加标签
EN

Stack Overflow用户
提问于 2018-05-27 04:18:37
回答 1查看 848关注 0票数 0

我的问题是当一起使用Jquery UI autocompletetag plugin (XOXCO)时,一旦我select其中一个自动完成的建议,它应该立即添加标签,但发生的是,一旦选择,建议消失了,虽然value被正确地写入到tags-id输入仍然label本身不会显示为标签,除非我按enter,如果我不这样做,那么标签将不会被正确添加。

我想我应该告诉标记插件,一旦我从自动完成插件触发select事件,就去创建标记。但是我做不到。

下面是我的代码:

代码语言:javascript
复制
<!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):

代码语言:javascript
复制
[ 
{ "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" } } 
]
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-05-29 08:36:58

我找到了答案,并将其添加到这里,以供任何想要了解它的人使用。

select函数的autocomplete plugin中,我添加了$('#tags').addTag(ui.item.label);而不是$( "#tags_tag" ).val( ui.item.label );,如下所示:

代码语言:javascript
复制
select: function( event, ui ) {
                  $('#tags').addTag(ui.item.label);
                  $( "#tags-id" ).val( ui.item.value );
                  return false;
               },

它就像一个护身符一样起作用。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/50546680

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档