Setting a minimum length for your search in Typeahead.js

How you can set a minimum length for your search in Typeahead.js

I was looking through the Jasmine tests for Typeahead.js whilst doing research for a book I am writing on the subject and I noticed a handy little thing that isn’t documented on the Github page.

You can pass in minLength with your dataset and this means no lookups will be completed until the user has entered in enough characters, for example;

$('#people').typeahead({
  name: 'people',
  prefetch: './names.json',
  minLength: 3
});

This helps to greatly reduce the amount of lookups your code will do and will be helpful when you know that the first couple of characters the user enters is going to bring back too many results to be useful.

Obviously you don’t want to set this value to be greater than the length of your smallest possible return value, and if you make it too large the user might not know that there is a typeahead feature enabled.

I hope this helped, if you want to learn more about Typeahead.js I have written a book on it!

Recent posts View all

Talk CSS

FrontEnders - Web Performance

Sharing some of my thoughts on a FrontEnders meetup on the topic of Web Performance

Conferences

Tips for how to ask for time off to attend conferences

Asking for time off to attend a conference can be nerve-racking, these tips will get you closer to attending the conferences you're interested in.