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);
}
?>
Hi
ReplyDeleteThanks 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
Thanks, mate...
ReplyDeletehello really nice tutorial , can you please tell me how can i add a additional search button for this script ? thank you
ReplyDeleteThank you so much. Very helpful
ReplyDeletehow autocomplete the rest of fields relation with the autocomplete search?
ReplyDeleteThanks
not working
ReplyDeleteHi, i´m from Chile and i have problems with Accents and special characters, can you help me please? Thanks!
ReplyDeleteAny method for add link (a tag) to result suggerest?
ReplyDeleteThanks ! it is working
ReplyDeleteExcelente tutorial, si quisera que al selecionr alguno de los paises tambien me retornara en ota caja de texto el phone code
ReplyDeleteI can't handle the URL and put it into href="#" .. how can I do?
ReplyDeletenot support thai language
ReplyDeleteIt worked fabulously... Great Sir...
ReplyDeletewhat if theres no in database how to see the NO SEARCH FOUND
ReplyDeletenot working in numbers
ReplyDeleteThis helped me a lot, thank you very much :)
ReplyDeleteplease sir can u help me, i tried ur code but it showed me this message "Undefined index: query"
ReplyDelete