CODEWITHSUNDEEP
jqueryajaxjquery-select2
Roxx
Roxx

Reputation: 3986

jquery select2: set tag length while creating the tag

Does anyone know how we can set the maximum number of lenght of a tag in select2. Below is my code and in this code i can create long tag (15-20). i want to restrict it to 10 char.

<script type="text/javascript">
var lastResults = [];

$("#tags").select2({
    multiple: true,

    //tags: true,    
    placeholder: "Please enter tags",
    tokenSeparators: [","],
    initSelection : function (element, callback) {
        var data = [];
        $(element.val().split(",")).each(function () {
            data.push({id: this, text: this});
        });
        callback(data);
    },
    ajax: {
        multiple: true,
        url: "fetch.php",
        dataType: "json",
        delay: 250,
        type: "POST",
      data: function(term,page) {
                        return {q: term};
                    },
                    results: function(data,page) {
                        return {results: data};
                    }, 

    },
    minimumInputLength: 2,
      // max tags is 3
    maximumSelectionSize: 3,   
    createSearchChoice: function (term) {
        var text = term + (lastResults.some(function(r) { return r.text == term }) ? "" : " (new)");
       // return { id: term, text: text };
         return {
            id: $.trim(term),
            text: $.trim(term) + ' (new tag)'
        };        
    },
});

$('#tags').on("change", function(e){
    if (e.added) {
        if (/ \(new\)$/.test(e.added.text)) {
           var response = confirm("Do you want to add the new tag "+e.added.id+"?");
           if (response == true) {
              alert("Will now send new tag to server: " + e.added.id);
              /*
               $.ajax({
                   type: "POST",
                   url: '/someurl&action=addTag',
                   data: {id: e.added.id, action: add},    
                   error: function () {
                      alert("error");
                   }
                });
               */
           } else {
                console.log("Removing the tag");
                var selectedTags = $("#tags").select2("val");
                var index = selectedTags.indexOf(e.added.id);
                selectedTags.splice(index,1);
                if (selectedTags.length == 0) {
                    $("#tags").select2("val","");
                } else {
                    $("#tags").select2("val",selectedTags);
                }
           }
        }
    }
});
</script>

i am not looking for minimumInputLength or maximumSelectionSize.

Upvotes: 0

Views: 1819

Answers (2)

Sahil Kashyap
Sahil Kashyap

Reputation: 359

https://jsfiddle.net/Physcocybernatics/jvpsqy4o/3/ 

<select id="tags" multiple="multiple">
    <option selected="selected">Kerry</option>
    <option selected="selected">Cork</option>
</select>

$("#tags").select2({ 
      tags: true,
    tokenSeparators: [',', ' '],  //allow tags when space or , is pressed
    createTag: function (params) {
    // don't allow tags which are less than 3 charackter
    if (params.term.length < 11) {
      // Return null to disable tag creation
      return null;
    }

    return {
      id: params.term,
      text: params.term
    }
  }

    });

params.term.length is how I'm getting the length of my tags

return null disabling tag creation

Upvotes: 0

Kevin Brown-Silva
Kevin Brown-Silva

Reputation: 41719

It sounds like you are looking for the maximumInputLength option. This will limit the length allowed for custom tags and when searching.

Upvotes: 2

Related Questions