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

  20. Nice info about Php it’s reallyhelpful…. If it possible share some more tutorials……….

  21. This “php ustad” tutorial blog is designed for beginners – to learn php at home step by step using simple programming examples

  22. Linux Online training in India – Webtrackker Technology is providing the linux online training with 100% placement support. If you are looking for the BEST LINUX & UNIX Training Institute In india or linux online training from india, live project based LINUX & UNIX online training then you can contact to us.

    Python online training in India, RPA Online training in India, Salesforce online training in india, AWS online training in india, Cloud Computing Online Training in India, SAS Online Training in india, Hadoop online training in INDIA, Oracle DBA online training in India, SAP online Training In india, Linux Online training in India

  23. Australia Best Tutor is one of the best Online Assignment Help providers at an affordable price. Here All Learners or Students are getting best quality assignment help with reference and styles formatting.

    Visit us for more Information

    Australia Best Tutor
    Sydney, NSW, Australia
    Call @ +61-730-407-305
    Live Chat @

    Our Services

    Online assignment help
    my assignment help Student
    Assignment help Student
    help with assignment Student
    Students instant assignment help

  24. thank you , i want to know how i can use the json data used from search add to var