Autocomplete Search Using typeahead.js

1 min read

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

typeahead_op

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.

Related posts:

Galen Framework – Part 2

Today, lots of automation tools are available in the market for the various testing purpose like cross browser testing, Responsive testing, load testing etc.,...
karthikeyan S
1 min read

May Month Chennai-JS Meetup Will Be Hosted By Spritle…

The official announcement can be found at Chennai-JS Meetup.com. Two of our staffs (Abilash and Prabakaran) will be talking at this meet-up.
Balaji D Loganathan
35 sec read

Embed Responsive Webpages in a React-Native App

Embedding a responsive website on a mobile app helps us to show dynamic content without the need to go and edit the actual mobile...
Sathyapriya S
44 sec read

Leave a Reply

Your email address will not be published. Required fields are marked *