Typeahead.js AutoComplete Tutorial - Ajax, Mysql, Remote

byAbdul Rashid -
34
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.
Tags:

34 Comments

  1. RajisMarch 21, 2014 at 2:56 PM

    I am Using the FOllowing Code


    name : 'search',
    valueKey: '',
    limit:10,
    remote: {
    url : base_url/'
    },



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

    Guide me.

    ReplyDelete
    Replies
    1. Abdul RashidMarch 21, 2014 at 2:59 PM

      Twitter Bootstrap Need to Set the valueKey Property.

      Its Emty in Your Case.

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

      Delete
  2. akshobhyaMay 28, 2014 at 2:40 PM

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



    thanks and advance

    ReplyDelete
  3. Anything, everything in one place.July 18, 2014 at 6:19 AM

    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.

    ReplyDelete
    Replies
    1. Abdul RashidJuly 18, 2014 at 9:58 PM

      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

      Delete
  4. AnonymousSeptember 11, 2014 at 2:40 PM

    That's really poorly coded.

    ReplyDelete
    Replies
    1. Abdul RashidSeptember 12, 2014 at 3:44 AM

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

      Delete
  5. LaraSeptember 17, 2014 at 1:45 AM

    Thanks for the simple and useful code.

    ReplyDelete
  6. AnonymousOctober 20, 2014 at 12:07 PM

    The selector for jquery document ready is wrongly done.

    Supposed to be

    $(document).ready

    and NOT

    $("document").ready as bove.

    Thanks so much for this tutorial man

    ReplyDelete
  7. AnonymousDecember 8, 2014 at 6:34 AM

    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?
    example:
    I have
    ID - Col1 - Col2
    It's only showing the Col1... I need the ID too...

    Thank you

    ReplyDelete
  8. AnonymousApril 1, 2015 at 4:18 PM

    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

    ReplyDelete
  9. AnonymousMay 3, 2015 at 5:27 PM

    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.

    ReplyDelete
  10. UnknownAugust 5, 2015 at 6:20 AM

    What is bootstrap and why should you use bootstrap?

    ReplyDelete
  11. AnonymousAugust 24, 2015 at 12:48 PM

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

    ReplyDelete
  12. UnknownNovember 9, 2015 at 4:54 AM

    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.

    ReplyDelete
  13. aniketNovember 25, 2015 at 10:55 PM

    Thanks for the Post Really needed it

    ReplyDelete
  14. UnknownJanuary 11, 2016 at 9:32 AM

    How can i add Html Tag in search box result

    ReplyDelete
  15. AnonymousApril 21, 2016 at 4:12 PM

    how can i integrate typehead in laravel 5.1

    ReplyDelete
  16. UnknownAugust 17, 2016 at 10:55 PM

    This comment has been removed by the author.

    ReplyDelete
  17. seravina danniellaOctober 12, 2016 at 12:44 PM

    This comment has been removed by a blog administrator.

    ReplyDelete
  18. UnknownJanuary 9, 2017 at 12:22 PM

    how can i integrate typehead in codeignitor

    ReplyDelete
  19. Muhammad UsmanFebruary 23, 2017 at 2:05 PM

    Any body can share code for download? i ll' use for http://howcanisolve.com Thanks in advance

    ReplyDelete
  20. UnknownJune 21, 2017 at 9:12 AM

    These ways are very simple and very much useful,Thank you.
    Hire PHP developer in India | Professional website design company

    ReplyDelete
  21. UnknownNovember 9, 2017 at 9:27 PM

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

    ReplyDelete
  22. UnknownMay 16, 2018 at 1:13 PM

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

    ReplyDelete
  23. FionaOctober 1, 2018 at 1:10 AM

    Thank you for the information you wrote.

    ReplyDelete
  24. bhola patelMarch 3, 2022 at 8:44 AM

    Android Mobile App Development in Ahmedabad
    Web 3.0 India is the most trusted Web3 Blockchain Development and NFT Development Company in USA. We also provides ICO, STO development for cryptocurrency.
    https://web30india.com/

    ReplyDelete
  25. Livewell HospitalDecember 6, 2022 at 3:11 PM

    We appreciate you sharing this informative post with us. Continue providing us with helpful content.

    https://www.ownuxglobal.com/

    ReplyDelete
  26. NeerajaJuly 24, 2026 at 10:10 AM

    Excellent tutorial! The Typeahead.js autocomplete implementation with AJAX is well explained and practical for developers building responsive search features. Thanks for sharing this useful guide and helping others learn modern web development techniques.

    Generative AI Training in Hyderabad

    ReplyDelete
  27. Brolly AIJuly 30, 2026 at 8:35 AM

    Excellent tutorial! The AJAX autocomplete example is clear and easy to understand. Thanks for sharing this useful Typeahead.js guide!
    Generative AI Training in Hyderabad

    ReplyDelete
  28. PMP AcademyJuly 30, 2026 at 9:48 AM

    Great tutorial! I liked how you demonstrated building an AJAX-powered autocomplete using Typeahead.js in a practical, step-by-step way. Combining jQuery, AJAX, and a database-backed search is a great example of creating a responsive user experience. The code is easy to follow, making it a useful resource for developers who want to implement real-time search suggestions in their web applications. Thanks for sharing this helpful guide! 👏
    PMP Certification Course in Hyderabad

    ReplyDelete
  29. AIMLOpsMastersJuly 31, 2026 at 9:42 AM

    Excellent tutorial! The Typeahead.js autocomplete example with AJAX is explained clearly and is easy to implement. Thanks for sharing this useful web development resource.
    MLOPS Training in Hyderabad

    ReplyDelete
  30. AIMLOpsMastersAugust 7, 2026 at 8:58 AM

    Great tutorial on Typeahead.js autocomplete with AJAX. The explanation is clear and the example is very useful for implementing search suggestions. Thanks for sharing this helpful post!
    MLOPS Training in Hyderabad

    ReplyDelete
Previous Post Next Post