Auto Complete Using Twitter Typeahead.js

Twitter typeahead.js is one of the best jQuery plugin used for auto completion or Auto suggest. You can get the detail about this open source code on GitHub. It is very easy to use. Either you can store data in an Array or You can fetch records from MySql table using PHP. Lets discuss both.

CSS and JavaScript Files you need for this project are
- bootstrap.css
- jquery.js
- bootstrap.js
- typeahead.js
You will get all required files after downloading the project zip file.

Select data from an Array

CSS Code:

.typeahead-devs, .tt-hint {
border: 2px solid #CCCCCC;
border-radius: 8px 8px 8px 8px;
font-size: 24px;
height: 45px;
line-height: 30px;
outline: medium none;
padding: 8px 12px;
width: 400px;
}

.tt-dropdown-menu {
width: 400px;
margin-top: 5px;
padding: 8px 12px;
background-color: #fff;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 8px 8px 8px 8px;
font-size: 18px;
color: #111;
background-color: #F1F1F1;
}

JavaScript Code:

$(document).ready(function() {
$('input.typeahead-devs').typeahead({
name: 'accounts',
local:['Sunday', 'Monday','Tuesday','Wednesday','Thursday','Friday','Saturday']
});
})

HTML Code:

<form method="POST" action="#">
<input type="text" name="accounts" size="20" class="typeahead-devs" 
placeholder="Please Enter Day Name">
</form>

Output: [Please enter any weekday]

Select data from Database

CSS Code:

.typeahead-devs, .tt-hint {
border: 2px solid #CCCCCC;
border-radius: 8px 8px 8px 8px;
font-size: 24px;
height: 45px;
line-height: 30px;
outline: medium none;
padding: 8px 12px;
width: 400px;
}

.tt-dropdown-menu {
width: 400px;
margin-top: 5px;
padding: 8px 12px;
background-color: #fff;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 8px 8px 8px 8px;
font-size: 18px;
color: #111;
background-color: #F1F1F1;
}

JavaScript Code:

$(document).ready(function() {
$('input.country').typeahead({
name: 'country',
remote : 'http://domain.com/country.php?query=%QUERY'
});;
})

HTML Code:

<form method="POST" action="#">
<input type="text" name="country" size="20" class="country" 
placeholder="Please Enter County">
</form>

PHP Code [country.php]:

if (isset($_REQUEST['query'])) {
$query = $_REQUEST['query'];
$sql = mysql_query ("SELECT * FROM country WHERE country LIKE '%{$query}%'");
$array = array();
while ($row = mysql_fetch_assoc($sql)) {
$array[] = $row['country'];
}
echo json_encode ($array); //Return the JSON Array
}