Sunday, December 22, 2013

Typeahead.js AutoComplete Tutorial - Ajax, Mysql, Remote

Twitter Provides awesome typeahead javascript plugin to have 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=""></script>
<link rel="stylesheet" href="//">

<script src="//"></script>

Complete Code of Index.html

<html lang="en">

    <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" />
<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>
.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;
} {
    color: #fff;
    background-color: #0097cf;

        name : 'sear',
        remote: {
            url : 'connection.php?query=%QUERY'
    <input type="text" name="search" id="search">


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

$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;
     echo json_encode($user_arr2);

Thats it.


  1. I am Using the FOllowing Code

    name : 'search',
    valueKey: '',
    remote: {
    url : base_url/'

    My Bootstrap is Showing only one Auto Suggestion. But My Json Response is an Array of Object.

    Guide me.

    1. Twitter Bootstrap Need to Set the valueKey Property.

      Its Emty in Your Case.

      Set valueKey:"product_id" // Or What ever.

  2. hi,
    I want to get that $user_arr[] values what we have to do

    thanks and advance

  3. I copied the codes as is and it worked fine but I noticed, only up to 10 records retrieved from database even LIMIT 0,10 is removed. I want to retrieve the whole list of names from the database.

    Any help is much appreciated.

    1. That's the default value.
      You should use a combination of limit and minLength. limit is the max number of suggestions that will be displayed for a given query (defaults to 5) and minLength is the minimum number of characters a query needs before suggestions start to get rendered

  4. That's really poorly coded.

    1. Yes Dear friend, Its Demonstration. You can split the CSS and JS to Separate Files.

  5. Thanks for the simple and useful code.

  6. The selector for jquery document ready is wrongly done.

    Supposed to be


    and NOT

    $("document").ready as bove.

    Thanks so much for this tutorial man

  7. hey my friend... i am trying to get the my ID together but i don't know how to do... could you explain a little better?
    I have
    ID - Col1 - Col2
    It's only showing the Col1... I need the ID too...

    Thank you

  8. i have array object how to use this for type ahead can you give any example with complete code with proper using type head js thanks in advance

  9. How can I submit the typed text to another URL for processing? In my case, I want user to type ahead and select the text they want to submit to do a search.It is currently going to the same URL used for getting the typeahead data.

  10. When i have multiple columns then what should be valueKey=?? i want search from multiple columns and also gives suggestion as per columns.

  11. where can i get the files boostrap.js and typeahead.js, i have looked all over the internet and can not for the life of me find the ones that work.

  12. Thanks for the Post Really needed it

  13. How can i add Html Tag in search box result

  14. how can i integrate typehead in laravel 5.1

  15. This comment has been removed by the author.

  16. This comment has been removed by a blog administrator.

  17. how can i integrate typehead in codeignitor

  18. Any body can share code for download? i ll' use for Thanks in advance

  19. Given so much info in it, These type of articles keeps the users interest in the website, and keep on sharing more ..Best PHP Training in Chennai|PHP Training in Chennai