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?

Luau

The documentation doesn't appear to have any settings to allow you to amend this behaviour. – Didynamous

But, Rory is it possible with any other way.? – Luau

Everything is possible. You would probably need to create your own plugin to achieve it. – Didynamous

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

Pleat

btw why naming anonymous function? – Orthopedic

an anonymous functions has no name. The 'onScore' function has a name (so its not anonymous) that helps a bit to understand what is doing. Maybe the name could be even more accurate, but when you are debugging, you see the names in the stack trace, which is nicer than looking at so many anonymous functions. – Pleat

oh....ok......which I never do and think it is not very useful, the object key gives enough hints already. Whatever – Orthopedic

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

Issuance

This solution works fine. I had it implemented as well. – Boeotian

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)

Sirkin

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.

Pydna

Answer 5

1. Download selectize.js plugin

2. Include jquery and

Use this code, It will work.

$('#your-id').selectize({ maxItems: 3 });

Neary

characters, not items – Mucoprotein

there is no direct selectize API for that. – Pleat