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);
}

?>

0 comments:

Post a Comment