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
Contents
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.
I am Jaydeep Gondaliya , a software engineer, the founder and the person running Pakainfo. I’m a full-stack developer, entrepreneur and owner of Pakainfo.com. I live in India and I love to write tutorials and tips that can help to other artisan, a Passionate Blogger, who love to share the informative content on PHP, JavaScript, jQuery, Laravel, CodeIgniter, VueJS, AngularJS and Bootstrap from the early stage.