Typeahead.js one of the Autocomplete search plugin inspired by Twitter.com. For our project, we had similar requirement to show suggestions based on the search term typed by the user, we thought to give it a try with typeahead.js. We found it amazing to see the effectiveness of this library. Compared to other Auto complete Javascript, we found the fetching results of typeahead.js is very fast. In this post I will try to list some of the usage of typeahead.js and the options provided.
The typeahead.js library consists of 2 components: the suggestion engine, Bloodhound, and the UI view, Typeahead.The suggestion engine is responsible for computing suggestions for a given query. The UI view is responsible for rendering suggestions and handling DOM interactions. Both bloodhound.js and typeahead.jquery.js have a dependency on jQuery 1.9+.
To turn any text box of our application to a typeahead, we have to just include the typeahead.jquery.js, jquery.typeahead.css and initialize it by,
$('.typeahead').typeahead(options,[datasets]);Where options is an hash that’s used to configure the typeahead and a typeahead can be composed of one or more datasets according to the requirement. The following are the list of options we can actually use here,
$('.typeahead').typeahead({
// minimum character length needed before suggestions start getting rendered.
minLength: 3,
//Highlights the matched string, in the result set.
highlight: true,
//If false, the typeahead will not show a hint in the text box (autocomplete).
hint: true
},
{
//The name of the dataset.
name: 'my-dataset',
//The backing data source for suggestions.
source: mySource,
displayKey: 'value',
//A hash of templates to be used when rendering the dataset.
//empty, footer, header, suggestion available.
templates: {}
});
The custom events which can be triggered are,
$('.typeahead')
.typeahead(/* pass in your datasets and initialize the typeahead */)
.on('typeahead:opened', onOpened)
.on('typeahead:selected', onAutocompleted)
.on('typeahead:autocompleted', onSelected)
.on('typeahead:cursorChanged', onCursorChanged);
function onOpened($e) {
console.log('opened');
}
function onAutocompleted($e, datum) {
console.log('autocompleted');
console.log(datum);
}
function onSelected($e, datum) {
console.log('selected');
console.log(datum);
}
function onCursorChanged($e, datum) {
console.log('cursor changed');
console.log(datum);
}
Some of the other functions provided are,
//Reverts the input element back to its original state
$('.typeahead').typeahead('destroy');
//Opens the dropdown menu of typeahead.
$('.typeahead').typeahead('open');
//Closes the dropdown menu of typeahead.
$('.typeahead').typeahead('close');
//Returns the current value of the typeahead.
var myVal = $('.typeahead').typeahead('val');
//Sets the value of the typeahead.
$('.typeahead').typeahead('val',myVal);
Sample code
Find sample code base at https://github.com/prvarshini/typeahead-sample.
For more advanced use cases, we can go with Bloodhound. I will update about the usage of Bloodhound once I explore it. Hope it was useful.
