tom-select

Placeholder when using minimum length


I'm using the shouldLoad functionality to set a minimum length of characters before data loads from a remote source, like the example here

shouldLoad:function(query){
        if ( query.length < 3 ) return false;
  return true;
},

Is there a way to show the user that they must then enter this minimum number of characters, like select2 does?

enter image description here

Thanks


Solution

  • Of course,

    You can use not_loading in your renderer function which is triggered when you return false from shouldLoad.

    Example:

    render: {       
                option: function(item, escape) {
                    return `<div>${ escape(item.name) }</div>`;
                },
                item: function(item, escape) {
                    return `<div>${ escape(item.name) }</div>`;
                },
                not_loading:function(data,escape){
                    return `<div>Please enter 2 or more characters </div>`;
                },
            },
        });
    

    You can learn more from their official doc.

    Hope it helps.