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

【问题标题】：Jquery Tagit to only allow entry by clicking on available tags under the Tagit input windowJquery Tagit 只允许通过单击 Tagit 输入窗口下的可用标签来输入
【发布时间】：2020-05-09 07:08:28
【问题描述】：

使用 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 tag-it

【解决方案1】：

这并不能直接回答我的问题，因为我想不出一种方法来使用 Jquery Tagit 来做我想做的事情。

所以我创建了一个自定义例程来执行此操作：

从标签列表中添加/删除到可见的 DIV 框中，
在隐藏的输入文本字段中添加/删除（用于表单处理）
在添加或删除标签时从标签列表中添加/删除
用户无法在可见框中手动输入以创建任何自定义标签

下面的完整代码以及一些用于标签外观的 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>

【讨论】：