How to limit minimum character in selectize tags

Question

I want to limit minimum 3 characters for Selectize tags input. Is it possible? is there any event in selectize?

Answer 1

I had the same problem. Its as Rory has mentioned, via plugins.

Its actually quite simple.

The official example for tag minimum word length filtering you can find here

$('#select-words-length').selectize({
    create: true,
    createFilter: function(input) { return input.length >= MIN_LENGTH; }
});

Another thing that you can do is filter the search itself

//restricts the matches to fulfill MIN_SEARCH_LENGTH via the 'score' callback
//see https://github.com/brianreavis/selectize.js/blob/master/docs/usage.md#callbacks
score: function scoreFilter(search) {
    var ignore = search && search.length < MIN_SEARCH_LENGTH;
    var score = this.getScoreFunction(search);
    //the "search" argument is a Search object (see https://github.com/brianreavis/selectize.js/blob/master/docs/usage.md#search).
    return function onScore(item) {
        if (ignore) {
            //If 0, the option is declared not a match.
            return 0;
        } else {
            var result = score(item);
            return result;
        }
    };
},

Hope that helps :)

Answer 2

There is a working example in the docs. See the "Remote Source — Rotten Tomatoes" example. I adapted to something like this:

load: function(query, callback) {
    if (!query || query.length < 3) return callback();  // <- this line
    $.ajax({ 
        // ajax options...

Answer 3

Here is a dirty workaround that works for me, hope it helps.

var checkLength = function() {
    if (selectize.$control_input.val().length < 3) selectize.close()
};

selectize.on('dropdown_open', checkLength)

Answer 4

This is another solution if you want to do it with only CSS:

You can use ch to set the selection width, which takes into account the number of characters. See this example which results in the image below (tested in Chrome v99)

select {
    max-width: 2ch;
    padding-right: 24px;
    box-sizing: content-box;
}

Maybe you need to adjust the 2ch to 2.2ch or something depending on your font.