Typeahead.js AutoComplete Tutorial - Ajax, Mysql, Remote

byAbdul Rashid -
29
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:

29 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
Previous Post Next Post