Jquery Tagit只允许通过点击Tagit输入窗口下的可用标签来输入

wmvff8tz 于 2023-08-04 发布在 jQuery

关注(0)|答案(2)|浏览(122)

使用Jquery Tagit。我有一个tagit输入文本窗口，在输入窗口下面有预定义的标签。
单击下面显示的标记填充Tagit输入文本窗口-工作正常。我想防止用户在文本窗口中键入，只允许点击输入窗口下方显示的可用标签。
下面的代码允许用户输入自定义标记，我想防止。
我以为HTML“禁用”会起作用，但它似乎被Tagit程序覆盖了。

<div class="container">        
    <form id="the_form" method='post' action="" enctype="multipart/form-data">

        <div class="form-group">
            <label for="tags">For easy searching, choose the tags below or enter your own tags:</label>
            <input class="form-control" name="myTags" type="text" id="myTags" value="">

            <p class="super_tag" data-tag="tag">One</p>
            <p class="super_tag" data-tag="tag">Two</p>
            <p class="super_tag" data-tag="tag">Three</p>
            <p class="super_tag" data-tag="tag">Four</p>

        </div>       
    </form>
</div>

<script>
$(document).ready(function(){        
    //Add super tags to tagit window
    $(".super_tag").click(function(){
        var super_tag = $(this).text();
        $("#myTags").tagit("createTag", super_tag);
    });    
});
</script>

字符串

jquery

来源：https://stackoverflow.com/questions/61693057/jquery-tagit-to-only-allow-entry-by-clicking-on-available-tags-under-the-tagit-i

2条答案

按热度按时间

vngu2lb81#

这并没有直接回答我的问题，因为我找不到一种方法来使用Jquery Tagit做我想做的事情。
因此，我创建了一个自定义例程来执行此操作：
1.在可见的DIV框中添加/删除标签列表，
1.添加/删除隐藏的输入文本字段（用于表单处理）
1.在添加或删除标记时添加/删除标记列表
1.用户无法在可见框中手动键入以创建任何自定义标签
完成下面的代码与一些CSS标签外观：

<html lang="en">
<head>      
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<style>
.group_tag {
  height: 23px;
  width: auto;
  border: 1px solid #FFE082;
  background-color: #FFE082;
  border-radius: 6px;
  line-height: 24px;
  text-align: center;
  display:inline-block;
  padding-right: 10px;
  padding-left: 10px;
  font-family: Arial, sans-serif;
  font-size: 100%;
  color: #555555;
  margin-bottom: 2px;
  cursor: pointer;  
}
.group_tag:hover, .group_tag:hover {
    background-color:#FFCA28;  
    border: 1px solid #FFCA28;
}        
</style>
<div class="container">        
    <form id="the_form" method='post' action="" enctype="multipart/form-data">
        <div class="form-group">            
            <input class="form-control" name="tag_added_hidden" type="hidden" id="tag_added_hidden" value="" style="width:100%;">
        </div>   
    </form>

    <p style="margin-bottom:5px;">Choose the Group you wish associate this posting with:</p>
    <div id="tag_added" style="padding:3px;min-height:20px;border: thin solid black"></div>            
    <div id="group_tags" style="margin-top:10px;">
        <span class="group_tag add">One</span>
        <span class="group_tag add">Two</span>
        <span class="group_tag add">Three</span>
        <span class="group_tag add">Four</span>
    </div>

</div>
<script>
$(document).ready(function(){

    //Add tags to list and hidden input field
    $("body").on('click', '.add', function(){
        var group_tag = $(this).text();
        var group_tag_comma = group_tag+',';//for hidden csv input field
        console.log(group_tag_comma);
        $('#tag_added_hidden').val($('#tag_added_hidden').val() + group_tag_comma);
        $('#tag_added').append('<span class="group_tag remove" style="margin-right:3px;">'+group_tag+' <span class="x" style="position:relative; top:-2px;">x</span></span>')
        $(this).remove();
    });

    //remove tags from list and hidden input field
    $("body").on('click', '.remove', function(){
        var group_tag = $(this).text().slice(0, -2);//get tag string and remove the 'x' and extra space        
        //remove tag from hidden input field,';
        var hidden_field = $('#tag_added_hidden').val();//get text of input field
        var result = hidden_field.replace(group_tag+',', "");//remove tag from input field
        $('#tag_added_hidden').val(result);//replace result into input field  
        $(this).remove();//remove tag from list
        $('#group_tags').append('<span class="group_tag add" style="margin-right:3px;">'+group_tag+'</span>')
    });

});
</script>
</body>
</html>

字符串

赞(0）回复(0）举报 2023-08-04

yacmzcpb2#

$('#TagsInput').tagit({
  availableTags: AVAILABLETAGS,
  allowSpaces: true,
  placeholderText:"Type to search tags",
  showAutocompleteOnFocus: true,
  beforeTagAdded: function(evt, ui) {
      if (!ui.duringInitialization) {
          var tmpTagLbl = $('#TagsInput').tagit('tagLabel', ui.tag);
          var tmpTagLblIdx = AVAILABLETAGS.indexOf(tmpTagLbl);
          
          if(tmpTagLblIdx < 0){
            $('#TagsInput').tagit('tagLabel', ui.tag);
            $(ui.tag[0]).find('a').trigger("click"); //<a> is a remove/close button of the tag
            
          }
      }
  },
});

字符串

赞(0）回复(0）举报 2023-08-04

我来回答

Jquery Tagit只允许通过点击Tagit输入窗口下的可用标签来输入

2条答案

相关问题

热门标签

最新问答