Today, We want to share with you PHP Autocomplete search with typeahead.js.In this post we will show you Typeahead Autocomplete with Dynamic Data Load using PHP Ajax, hear for Dynamic Autocomplete search using Bootstrap Typeahead with PHP Ajax we will give you demo and example for implement.In this post, we will learn about Autocomplete Textbox using Bootstrap Typehead with Ajax PHP with an example.
PHP Autocomplete search with typeahead.js
There are the Following The simple About PHP Autocomplete search with typeahead.js Full Information With Example and source code.
As I will cover this Post with live Working example to develop autocomplete search box in php mysql, so the some search box with suggestions dropdown for this example is following below.
Create Autocomplete on an Input Field with typeahead.js
index.html
<!DOCTYPE html> <html> <head> <title>PHP Dynamic Autocomplete search using Bootstrap Typeahead with jQuery Ajax</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:800px;"> <h2 align="center">PHP Autocomplete Search from Database using Typeahead JS - pakainfo.come</h2> <br /><br /> <label>Search Members</label> <input type="text" name="member_list" id="member_list" class="form-control input-lg" autocomplete="off" placeholder="Type Members Name" /> </div> </body> </html>
Script Files
<script>
$(document).ready(function(){
$('#member_list').typeahead({
source: function(query, result)
{
$.ajax({
url:"get_members_fetch.php",
method:"POST",
data:{query:query},
dataType:"json",
success:function(data)
{
result($.map(data, function(item){
return item;
}));
}
})
}
});
});
</script>
Dynamic Autocomplete using Database
The following Dynamic Autocomplete PHP script receives the Typeahead input as the SELECT query parameter.
get_members_fetch.php
<?php
$db_connect = mysqli_connect("localhost", "root", "", "atmiya25");
$request = mysqli_real_escape_string($db_connect, $_POST["query"]);
$query = "SELECT * FROM members_mst WHERE member_name LIKE '%".$request."%'";
$result = mysqli_query($db_connect, $query);
$all_member_data = array();
if(mysqli_num_rows($result) > 0)
{
while($row = mysqli_fetch_assoc($result))
{
$all_member_data[] = $row["member_name"];
}
echo json_encode($all_member_data);
}
?>
Angular 6 CRUD Operations Application Tutorials
Read :
Summary
You can also read about AngularJS, ASP.NET, VueJs, PHP.
I hope you get an idea about PHP Autocomplete search with typeahead.js.
I would like to have feedback on my Pakainfo.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.
Related FAQ
Here are some more FAQ related to this Article: