Bootstrap Autocomplete Search Box / textbox in PHP MySQL

Autocomplete Search Box in PHP MySQL Example or PHP Autocomplete Ajax Textbox From Database Example. Here I shall Know how to integrate step by step an autocomplete search box, textbox in the PHP MySQL database using jQuery UI JavaScript.

Now I shall integrate an autofill php form from PHP mysql database Using jQuery UI JS and Bootstrap typeahead ajax json with a live demo with source code full example.

Autocomplete Search Box / textbox in PHP MySQL

Everytimes, I required to search for Records or data content Like Google using jquery ajax without loading the whole website page. This Article exhibits you how you can integrate an autocomplete search box in PHP MySQL with jQuery UI as well as bootstrap HTML form. This Article exhibits you an simple steps to jquery autocomplete ajax json search with PHP MySQL using jQuery UI js with bootstrap.

Autocomplete Search Box in PHP MySQL With jQuery UI

Just bellow the some next steps as well as simply integrate the autocomplete ajax json search PHP MySQL from the database with bootstrap typeahead & jQuery UI.

Ajax search box php mysql like google

First Make a DB (config.php) Connection File
Make an Autocomplete search form
Make a PHP Script for Search to DB
typeahead vs autocomplete
typeahead ajax
Dynamic Autocomplete search using Bootstrap Typeahead with PHP Ajax

Step: 1. First Make a DB (config.php) Connection File

In this first step, you will make a file name config.php as well change or update the following source code into your PHP file.

The following the source code is used to connect a MySQL database connection in PHP with mysql in server side code. When I search from MySQL database using PHP, there I shall include config.php file:

<?php
    $server_name='localhost';
    $user_name='root';
    $password='';
    $dbname = "your_database_db_name";
    $conn=mysqli_connect($server_name,$user_name,$password,"$dbname");
      if(!$conn){
          die('Sorry, Dear Please check your details, or Could not Connect MySql Server:' .mysql_error());
        }
?>

Step: 2. Make an Autocomplete search form

In this second step, I required to light weight create an autocomplete search box with change the simply copy paste following the source code into your autocomplete search box in PHP MySQL.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Autocomplete Search Box in PHP MySQL - www.Pakainfo.com</title>
 
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
 
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body> 
<div class="dsp container">
  <div class="row dsp">
     <h2>Search Here - TamilRokers</h2>
     <input type="text" name="search-google" id="search-google" placeholder="Please search here...." class="form-control litanswer">  
  </div>
</div>
<script type="text/javascript">
  $(function() {
     $( "#search-google" ).autocomplete({
       source: 'live-search-ajax-google.php',
     });
  });
</script>
</body>
</html>

And then, don’t forget anyway to update the following the list of External CSS as well JS library in your HTML Web page for autocomplete search box form:

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">

Step: 3. Make a PHP Script for Search to DB

In this third step, you required to create single file name like as a live-search-ajax-google.php and simple you can copy with paste update the following the source code into your PHP file.

The following source code is to ajax Based search into a MySQL database table using jquery an Ajax PHP script:

<?php
require_once "config.php";
if (isset($_GET['term'])) {
     
   $query = "SELECT * FROM products WHERE name LIKE '{$_GET['term']}%' LIMIT 25";
    $result = mysqli_query($conn, $query);
 
    if (mysqli_num_rows($result) > 0) {
     while ($product = mysqli_fetch_array($result)) {
      $res[] = $product['name'];
     }
    } else {
      $res = array();
    }
    //return json res
    echo json_encode($res);
}
?>

Now you can easy to run and check….

Example 2 : Bootstrap Autocomplete with Dynamic Data Load using PHP Ajax

In this tutorial, we are going to display how to load Records dynamically for an autocomplete suggestion list, Bootstrap Typeahead Form text input with search icon. I use jQuery AJAX to call the PHP server side to get Records MySQL Database source code to read the Records from the MySQL database with autocomplete dynamically. The bind& loaded Records will be returned to the source attribute of the Typeahead script to list the autocomplete hint Like google search.

jQuery AJAX Callback to Supply Typeahead Source

The following jQuery script is used to initialize the Bootstrap Typeahead function to integrate autocomplete for an Bootstrap 4 text input with search icon. While typing data to the input tag, the value is sent to the PHP script as the term parameter using jQuery AJAX POST method. This method received the database response in a JSON format and used as the source for showing autocomplete suggestions.

The JSON data is received as well parsed in the AJAX callback by setting the property like dataType: JSON. If you want to display how to handle JSON data with PHP, then the linked tutorial has a full step by step guide on it.

<script>
    $(document).ready(function () {
        $('#txtProducts').typeahead({
            source: function (term, result) {
                $.ajax({
                    url: "live-search-ajax-google.php",
					data: 'term=' + term,            
                    dataType: "json",
                    type: "POST",
                    success: function (data) {
						result($.map(data, function (item) {
							return item;
                        }));
                    }
                });
            }
        });
    });
</script>

Dynamic Autocomplete using Database

The Bellow PHP server side source code to get the Typeahead input as the MySQL SELECT query statement arguments. It will be bound to the term statement to get the connected product name that starts with the term string. It data will be encoded with php json_encode($array of objects) in JSON Data format as well as return to the display of the Typehead source attribute.

<?php		
	$keyword = strval($_POST['term']);
	$search_param = "{$keyword}%";
	$conn =new mysqli('localhost', 'root', '' , 'pakainfo_eccomarce_store');

	$sql = $conn->prepare("SELECT * FROM tbl_product WHERE product_name LIKE ?");
	$sql->bind_param("s",$search_param);			
	$sql->execute();
	$result = $sql->get_result();
	if ($result->num_rows > 0) {
		while($row = $result->fetch_assoc()) {
		$productResult[] = $row["product_name"];
		}
		echo json_encode($productResult);
	}
	$conn->close();
?>

Now you can simply run and check….

Conclusion

In this My Best Article, I have Taught about how to integrate an autocomplete search box or textbox in PHP MySQL from the database table using jQuery UI Autocomplete JS.

It is a very helpful for your create a Contact List, important as well as simple example of Autocomplete Search textbox or inputbox in PHP MySQL with jQuery UI JS into the MySQL Database.

Web Programming Tutorials Example with Demo

Read :

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about autocomplete search box in php mysql.
I would like to have feedback on my infinityknow.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: