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
}


Download Example File Total Downloads: 13442

Comments
13 February
2014
ahmad
i faced some problem when i use this code. when i add new html element this code dosnt work any help
"
script type="text/javascript" src="js/jquery.js"
script type="text/javascript" src="js/bootstrap.js
script type="text/javascript" src="js/typeahead.js"
style
h1{
font-size: 20px;
color: #111;
}
.content{
width: 80%;
margin: 0 auto;
margin-top: 50px;
}

.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;
}

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

var i = 0;

function generateRow() {
alert("generateRow");
var mydiv = "div"+i;
var mydivo= "divo"+i;
var newdiv = "div"+ (i+1);
var newdivo= "divo"+(i+1);
var newsub = i+1+1;
var d=document.getElementById(mydiv);
var e=document.getElementById(mydivo);
d.innerHTML = "
";
e.innerHTML = "
";
i = i + 1;
}
script
input type="text" name="accounts[]" id="accounts" size="20" class="typeahead-devs" placeholder="Please Enter Day Name"
input type="text" name="accounts[]" id="accounts" size="20" class="typeahead-devs" placeholder="Please Enter Day Name"

input type="text" name="accounts[]" id="accounts" size="20" class="typeahead-devs" placeholder="Please Enter Day Name"
a href="#" onclick="generateRow();">Compunde
div id="div0" /div
11 February
2014
vijay kumar
solutiontpoint.com
09 January
2014
Alisson
Thank you very much, this example was very helpful for me
27 November
2013
Obe
Bien Hecho!! Funciona correctamente. Gracias
18 October
2013
Rodi
Thanks very useful !
comments powered by Disqus