Sunday, December 22, 2013

Typeahead.js AutoComplete Tutorial - Ajax, Mysql, Remote

Twitter Provides awesome typeahead javascript plugin to have google.com like search suggestion.

Note: Twitter Bootsrap Typeahead was Replaced with new Twitter typeahead. So Dont Confuse both.

For the Complete Working of the AutoSuggest Feature we need following files.

Latest version of this Tutorial is available here

JavaScript Files
  1. JQuery.js (Latest)
  2. bootstrap.js or bootstrap.min.js
  3. typeahead.js or typeahead.min.js


CSS Files

  1. bootstrap.css or bootstrap.min.css
Direct CDN Link for Files Above
<script src="http://cdn.jsdelivr.net/typeahead.js/0.9.3/typeahead.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>

Complete Code of Index.html


<!DOCTYPE>
<html lang="en">

<head>
    <title>Typeahead.js Tutorial with Mysql Database</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <meta name="generator" content="Geany 1.23.1" />
</head>
<link href="bootstrap.min.css" rel="stylesheet" />
<script type="text/javascript" src="jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="bootstrap.min.js"></script>
<script type="text/javascript" src="typeahead.min.js"></script>
<style>
.tt-query,
.tt-hint {
    width: 396px;
    height: 30px;
    padding: 8px 12px;
    font-size: 24px;
    line-height: 30px;
    border: 2px solid #ccc;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    outline: none;
}

.tt-query {
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.tt-hint {
    color: #999
}

.tt-dropdown-menu {
    width: 422px;
    margin-top: 12px;
    padding: 8px 0;
    background-color: #fff;
    border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, 0.2);
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
    -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
    box-shadow: 0 5px 10px rgba(0,0,0,.2);
}

.tt-suggestion {
    padding: 3px 20px;
    font-size: 18px;
    line-height: 24px;
}

.tt-suggestion.tt-is-under-cursor {
    color: #fff;
    background-color: #0097cf;

}
</style>
<script>
$(document).ready(function(){
    $("#search").typeahead({
        name : 'sear',
        remote: {
            url : 'connection.php?query=%QUERY'
        }
        
    });
});
</script>
<body>
    <input type="text" name="search" id="search">
</body>

</html>

Need a PHP File connection.php to fetch json data from Database

<?php
$con = new mysqli("localhost","root","","autopin");

$result = $con->query("SELECT id,imageurl FROM pinterest LIMIT 0,10");
    while ($row = $result->fetch_object()){
         $user_arr[] = $row->id;
         $user_arr2[] = $row->imageurl;
     }
     $result->close();
     echo json_encode($user_arr2);
?>

Thats it.

Read more…