Autocomplete Search Box / textbox in PHP MySQL

Autocomplete Search Box / textbox in PHP MySQL

Autocomplete Search Box, textbox in PHP MySQL Example or PHP Autocomplete Textbox From Database Example. Here We will learn how to implement an autocomplete search box, textbox in the PHP MySQL database using jQuery UI JS.

Here we will implement an autocomplete search textbox in PHP MySQL Using jQuery UI JS and Bootstrap with a live demo example.

Sometimes, we need to search for data without loading the whole page. This tutorial shows you how you can implement an autocomplete search box in PHP MySQL with jQuery UI and bootstrap form. This tutorial shows you an easy way to autocomplete search with PHP MySQL using jQuery UI js and bootstrap.

Autocomplete Search Box in PHP MySQL With jQuery UI

Just follow the few below steps and easily implement the autocomplete search PHP MySQL from the database with jQuery UI.

  • First Create a Database Connection File
  • Create an Autocomplete search form
  • Create a PHP Script for Search to Database

1. First Create a Database Connection File

In this step, you will create a file name db.php and update the below code into your file.

The below code is used to create a MySQL database connection in PHP. When we search from MySQL database using PHP, there we will include this file:

<?php
	$servername='localhost';
	$username='root';
	$password='';
	$dbname = "my_db";
	$conn=mysqli_connect($servername,$username,$password,"$dbname");
	  if(!$conn){
		  die('Could not Connect MySql Server:' .mysql_error());
		}
?>

2. Create an Autocomplete search form

In this step, we need to create an autocomplete search box and update the below 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 - Tutsmake.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>
  <!-- Bootstrap Css -->
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body> 
<div class="container">
  <div class="row">
     <h2>Search Here</h2>
     <input type="text" name="search" id="search" placeholder="search here...." class="form-control">  
  </div>
</div>
<script type="text/javascript">
  $(function() {
     $( "#search" ).autocomplete({
       source: 'ajax-db-search.php',
     });
  });
</script>
</body>
</html>

After that, don’t forget to update the below-given CSS and JS library in your autocomplete search box form:

<!-- Script -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<!-- jQuery UI -->
<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>

<!-- Bootstrap Css -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">

3. Create a PHP Script for Search to DB

In this step, you need to create one file name ajax-db-search.php and update the below code into your file.

The below code is to search into a MySQL database table using an Ajax PHP script:

<?php
require_once "db.php";
if (isset($_GET['term'])) {
    
   $query = "SELECT * FROM users WHERE name LIKE '{$_GET['term']}%' LIMIT 25";
    $result = mysqli_query($conn, $query);

    if (mysqli_num_rows($result) > 0) {
     while ($user = mysqli_fetch_array($result)) {
      $res[] = $user['name'];
     }
    } else {
      $res = array();
    }
    //return json res
    echo json_encode($res);
}
?>

Conclusion

In this tutorial, we have learned how to implement an autocomplete search box or textbox in PHP MySQL from the database table using jQuery UI Autocomplete JS.

The php autocomplete textbox from database example look like:

This is a very useful, important and easy example of Autocomplete Search textbox or inputbox in PHP MySQL with jQuery UI JS into the MySQL.

If you want to learn more PHP topic, you may like below:

You may like

  1. Registrtion form validation using jquery validator
  2. jQuery Form Validation Custom Error Message
  3. jQuery AJAX Form Submit PHP MySQL
  4. Simple Registration Form in PHP with Validation
  5. jQuery Ajax Form Submit with FormData Example
  6. Ajax Form Submit With Validation Laravel 6
  7. Laravel Google ReCaptcha Form Validation
  8. Laravel 6 | jQuery Form Validation Tutorial with Demo Example
  9. Form Validation Example In Laravel 6

If you have any questions or thoughts to share, use the comment form below to reach us.

AuthorTuts Make

My name is Devendra Dode. I am a full-stack developer, entrepreneur, and owner of Tutsmake.com. I like writing tutorials and tips that can help other developers. I share tutorials of PHP, Javascript, JQuery, Laravel, Codeigniter, Vue JS, Angular JS, React Js, WordPress and Bootstrap from a starting stage.

2 replies to Autocomplete Search Box / textbox in PHP MySQL

  1. I copied the code for
    “Autocomplete Search Box in PHP MySQL”
    and set it up on my shared web server.

    It works nicely!

    Thanks!
    Terry Harris

  2. If i wish to create an autocomplete(product name) textbox with pricing auto retrieval….please advise how should i do?

Leave a Reply

Your email address will not be published. Required fields are marked *