Autocompelete with Twitter Typehead.js

Twitter Typehead.js atuocomplete is a feature which is used to complete search keywords in search bar. It can be integrated with on site search, used to provide suggestion related to a search term. It is very important for on site search because of the following reasons.

1: To reduce the spelling mistakes

Autocompeletion is very helpfull to reduce the spelling mistakes of the visitors or users of your website. It improves the correctness of the on site searching and its features.

2: Promtion of your products

It is also very helpfull to promote your products. By using autocompeletion searching technique you can display your premium things on the top of sarching list. It attract the attention of the users towards the fatured products.

3: Increase the typing speed of physically disable

Autocomeplete technique is also very helpfull to increase the typing speed of physically disbaled peoples. They can type one letter and see a lots of suggession and choose among them.

What is Twitter Typehead.js ??

Twitter typehead.js is a fast and flexible javascript library that is easy to customize and provide reliable autocompelete functionality. it is a consist collection of two components.

1: Bloodhound
Bloodhound is suggession engine that is responsible for computing suggessions for a given query.

2: Typehead
Typehead is a UI View which is responsible for providing suggestions and handling DOM interactions.

How to install typehead ??

there are few common methods for the installation of typehead as mentioned below.

1: Preffered method

install with bower, type the following command in your command prompt or terminal

bower install typeahead.js

2: Other Methods

Download zipfile of latest release.
Download the dist files seprately
- bloodhound.js
- typeahead.jquery.js
- typeahead.bundle.js
- typeahead.bundle.min.js

How to use typehead.js ??

1: include following scripts because it has dependency of jquery and after the jquery also include the source file of typehead.bundle.js.

2: Initialize the typehead.js script

<script type="text/javascript">
$(document).ready(function(){
 // Assigning the local dataset
 var fruits= ['Apple', 'Banana', 'Blackcurrant', 'Feijoa', 'Figs', 'Lemon', 'Mango', 'Papaya', 'Rhubarb', 'watermelon'];

// Generating the suggestion engine
 var cars = new Bloodhound({
 datumTokenizer: Bloodhound.tokenizers.whitespace,
 queryTokenizer: Bloodhound.tokenizers.whitespace,
 local: fruits
 });

// Initializing the typeahead
 $('.typeahead').typeahead({
 hint: true,
 highlight: true, /* Enable substring highlighting */
 minLength: 1 /* Specify minimum characters required for showing result */
 },
 {
 name: 'fruits',
 source: fruits
 });
 });
 </script>

3: Include the following styesheet with in <head></head> tag

<style>
.bs-example { font-family: sans-serif;
 position: relative;
 margin: 100px;}
 .typeahead, .tt-query, .tt-hint {
 border: 2px solid #CCCCCC;
 border-radius: 8px; font-size: 22px;
 /* Set input font size */
 height: 30px;
 line-height: 30px;
 outline: medium none;
 padding: 8px 12px;
 width: 396px;

}
 .typeahead {
 background-color: #FFFFFF;
 }
 .typeahead:focus
 {
 border: 2px solid #0097CF;
 }
 .tt-query
 {
 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
 }
 color: #999999;
 }
 .tt-menu {
 background-color: #FFFFFF;
 border: 1px solid rgba(0, 0, 0, 0.2);
 border-radius: 8px;
 box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
 margin-top: 12px;
 padding: 8px 0;
 width: 422px;
 }
 .tt-suggestion
 {
 font-size: 22px;
 /* Set suggestion dropdown font size */
 padding: 3px 20px;
 }
 .tt-suggestion:hover {
 cursor: pointer;
 background-color: #0097CF;
 color: #FFFFFF;
 }
 .tt-suggestion p {
 margin: 0;
 }
 </style>

4: Add an input boxwith typehead tt-query class as given below

<body>
 <div class="bs-example">
 <h2>Type your favorite fruit name</h2>
 <input type="text" class="typeahead tt-query" autocomplete="off" spellcheck="false">
 </div>
 </body>

Now you can able to use typehead autocompelete feature

type