Thursday 20 April 2017

Dynamic Autocomplete search using Bootstrap Typeahead with PHP Ajax



In this post we have learn how to make Dynamic Autocomplete textbox by using Typeahead Jquery plugin with PHP Ajax. Autocomplete search means which query we have type in textbox then below textbox we have get the search related to that query. So we can easily get which we want to write under textbox by clicking on search result below textbox. In many website we have seen this feature. So in this post we are going to learn this topic like create autocomplete textbox by using Typeahead Jquery Plugin with Ajax PHP.

Typeahead JQuery Plugin is a very popular plugin for create autocomplete feature on input fields in modern web form. The principal objective of using this typeahead plugin is to increase the user understanding by providing idea or a list of potential option based on the text which we have typed while filled a form or search on Google, then we have get instant search. It will saves our time and decreases the number of possible errors, because we have do less possibility a spelling mistake while type under textbox.

Twitter typeaheads is a rapid and advance autocomplete library Which get idea from twitter.com's autocomplete search feature. With this library we can make autocomplete search functionality by putting data in local array or we can also make autocomplete search functionality by using server side database operation also by using Ajax. In this tutorial we will use Mysql database and from this we will fetch data via ajax request by using this Typeahead method.






Source Code



<!DOCTYPE html>
<html>
 <head>
  <title>Webslesson Tutorial | Autocomplete Textbox using Bootstrap Typehead with Ajax PHP</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"></script>  
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />  
 </head>
 <body>
  <br /><br />
  <div class="container" style="width:600px;">
   <h2 align="center">Autocomplete Textbox using Bootstrap Typeahead with Ajax PHP</h2>
   <br /><br />
   <label>Search Country</label>
   <input type="text" name="country" id="country" class="form-control input-lg" autocomplete="off" placeholder="Type Country Name" />
  </div>
 </body>
</html>

<script>
$(document).ready(function(){
 
 $('#country').typeahead({
  source: function(query, result)
  {
   $.ajax({
    url:"fetch.php",
    method:"POST",
    data:{query:query},
    dataType:"json",
    success:function(data)
    {
     result($.map(data, function(item){
      return item;
     }));
    }
   })
  }
 });
 
});
</script>



<?php
//fetch.php
$connect = mysqli_connect("localhost", "root", "", "testing");
$request = mysqli_real_escape_string($connect, $_POST["query"]);
$query = "
 SELECT * FROM countries WHERE name LIKE '%".$request."%'
";

$result = mysqli_query($connect, $query);

$data = array();

if(mysqli_num_rows($result) > 0)
{
 while($row = mysqli_fetch_assoc($result))
 {
  $data[] = $row["name"];
 }
 echo json_encode($data);
}

?>

17 comments:

  1. Hi
    Thanks for an wonderful article. This is an very good job you had done.Keep on post. We love to read you content. Very impressive and unique.Good luck and very best to you for further ahead.
    Cheers

    ReplyDelete
  2. hello really nice tutorial , can you please tell me how can i add a additional search button for this script ? thank you

    ReplyDelete
  3. Thank you so much. Very helpful

    ReplyDelete
  4. how autocomplete the rest of fields relation with the autocomplete search?

    Thanks

    ReplyDelete
  5. Hi, i´m from Chile and i have problems with Accents and special characters, can you help me please? Thanks!

    ReplyDelete
  6. Any method for add link (a tag) to result suggerest?

    ReplyDelete
  7. Excelente tutorial, si quisera que al selecionr alguno de los paises tambien me retornara en ota caja de texto el phone code

    ReplyDelete
  8. I can't handle the URL and put it into href="#" .. how can I do?

    ReplyDelete
  9. It worked fabulously... Great Sir...

    ReplyDelete
  10. what if theres no in database how to see the NO SEARCH FOUND

    ReplyDelete
  11. This helped me a lot, thank you very much :)

    ReplyDelete
  12. please sir can u help me, i tried ur code but it showed me this message "Undefined index: query"

    ReplyDelete