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.

27 comments:

  1. 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. Twitter Bootstrap Need to Set the valueKey Property.

      Its Emty in Your Case.

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

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



    thanks and advance

    ReplyDelete
  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.

    ReplyDelete
    Replies
    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

      Delete
  4. That's really poorly coded.

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

      Delete
  5. Thanks for the simple and useful code.

    ReplyDelete
  6. 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. 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. 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. 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. When i have multiple columns then what should be valueKey=?? i want search from multiple columns and also gives suggestion as per columns.

    ReplyDelete
  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.

    ReplyDelete
  12. Thanks for the Post Really needed it

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

    ReplyDelete
  14. how can i integrate typehead in laravel 5.1

    ReplyDelete
  15. This comment has been removed by the author.

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

    ReplyDelete
  17. how can i integrate typehead in codeignitor

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

    ReplyDelete
  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

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

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

    ReplyDelete