Jquery Tagit to only allow entry by clicking on available tags under the Tagit input window

Question

Jquery Tagit to only allow entry by clicking on available tags under the Tagit input window

203 views Asked by HDer At 09 May 2020 at 07:08

Using Jquery Tagit. I have the tagit input text window with predefined tags underneath the input window.
Clicking on the tags shown underneath populates the Tagit input text window - works fine. I would like to prevent the user from typing in the text window and ONLY allow the clicking of the available tags shown underneath the input window.

The code below allows the user to input custom tags, which I want to prevent.

I thought the HTML "disabled" would work, but it seems to get overriden by the Tagit program.

<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>

Original Q&A

There are 2 answers

**HDer** · Answer 1 · 2020-05-09T23:24:48+00:00

This does not answer my question directly, as I could not figure out a way to use Jquery Tagit to do what I wanted.

So I created a custom routine to do this:

Adds/Removes from a list of tags into a visible DIV box,
Adds/Removes from a hidden input text field (for form processing)
Adds/Removes from the list of tags as tags are added or removed
User cannot manually type into the visible box to create any custom tags

Complete Code below with some CSS for tag appearance:

<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>

**dinesh kumar** · Answer 2 · 2023-07-24T06:27:48+00:00

$('#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
            
          }
      }
  },
});

TechQA.

Jquery Tagit to only allow entry by clicking on available tags under the Tagit input window

There are 2 answers

Related Questions in JQUERY

Related Questions in TAG-IT

Popular Questions

Popular Tags

Trending Questions