Configuring minimum input length / user-defined callback whether results should show

[richardebeling]

I have a multi-select of names, and to prevent biases with my users, I want to only show matching results after at least 3 characters have been typed by the user.

What doesn't work

• The documentation lists the shouldLoad callback as a potential option:

  Use the shouldLoad() callback to implement minimum input length or other input validation.

  However, this only limits whether load will be called or not here:

  tom-select/src/tom-select.ts

  Lines 749 to 751 in 50f25e6

  	if( self.settings.shouldLoad.call(self,value) ){
  	self.load(value);
  	}

  
  any options that are already loaded (in my case: options of the original select, so they are always loaded) will still be shown to users if shouldLoad returns false. (jsbin)

• The documentation also lists the score callback as a potential option:

  Overrides the scoring function used to sort available options. The provided function should return a function that returns a number greater than or equal to zero to represent the score of an item (the function's first argument). If 0, the option is declared not a match.

  However, tom-select internally uses sifter to perform the searching/scoring, and sifter has a hardcoded path for 0-length inputs that assigns a score of 1 to each element here. Thus, I can only limit the display after the user has entered something (jsbin). For the initial dropdown, this might be solvable using openOnFocus, but this doesn't help if the user enters some filter and then removes it again. Also, the user can still manually open the dropdown with an empty filter.

What could potentially work

• Sifter provides a limit option that truncates results to this length. If I were able to pass in this option through tomselect, e.g. by tomselect offering a additionalSifterOptions setting, this could be used to limit results display in user-defined ways. I think it is suboptimal, as this is only applied after results have been scored, filtered and sorted, all of which wastes computing power if we already know that we do not want to show any results, but I guess it would work for me.

• Tomselect could offer some kind of callback setting that can be used to signal that no results should be shown. This could by implemented by adding a simple check here:

  if (self.settings.shouldShowResults && self.settings.shouldShowResults.call(self,query))) {
      return emptyResult; // build an emtpy sifter result here, or define a constant emtpyResult somewhere to be used here
  }

Conclusion

Am I missing something, is there some other way to achieve this? If not, is there a chance any of the options above could be made available to users?

[oyejorge]

Interesting. Yeah, shouldLoad would be the obvious choice but it only effects remote data. We might need to change that.

Here's another approach