Autocomplete Textbox Using JQuery AJAX In PHP MySql

In this post you will learn How to autocomplete textbox using jQuery AJAX in PHP MySQL.The Ajax Autocomplete text box is very user-friendly for any website.

The Autocomplete text box allows users to quickly find and select values from a list of pre-populated options. Suggestions are displayed automatically when the user enters the field.

By using jQuery with Ajax we can easily present automated proposals for all queries from the database in the text field. I don’t use the jQuery plugin to ask for text fields for autocomplete, but I do use the simple Ajax method with PHP and MySQL for autocomplete text fields. Let’s start with a tutorial on how to fill in text boxes automatically.

Here we present text fields for entering a city name. When users enter the city name, they display the city name starting with the characters they entered in the text box and the city displayed below the text box. This type of city is automatically selected from the users table from the MySQL database.

Table of Contents

Create MySql Connection in PHP

For importing and exporting database in MySql will make a separate file ‘dbCongif.php’. Add the following code and replace the database credentials with yours. You can find your db credentials in Application Access details:

We first need to create a database connection file called dbConfig.php to extract the city name from the database.

<?php
	// Database configuration 
	$dbHost     = "localhost"; 
	$dbUsername = "root"; 
	$dbPassword = ""; 
	$dbName     = "testing"; 
	 
	// Create database connection 
	$con = new mysqli($dbHost, $dbUsername, $dbPassword, $dbName); 
	 
	// Check connection 
	if ($con->connect_error) { 
	    die("Connection failed: " . $con->connect_error); 
	}
?>

Create an autocomplete search form

Now create the HTML search form page for searching the city name and autocomplete

index.php

<!Doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Autocomplete Textbox using jQuery AJAX in PHP MySql</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<style type="text/css">
    ul{
      margin-top: 0px;
      background: #fff;
      color: #000;
    }
    li{
      padding: 12px;
      cursor: pointer;
      color: black;
    }
    li:hover{
      background: #f0f0f0;
    }
</style>
  <body style="background-color: #ebebeb">
    <div class="container" style="margin-top: 50px;">
      <h2 class="text-center">Autocomplete Textbox using jQuery AJAX in PHP MySql</h2>
      <div class="row">
        <div class="col-md-3"></div>  
        <div class="col-md-6" style="margin-top:20px; margin-bottom:20px;">
          <form>
            <div class="form-group">
              <input type="text" class="form-control" name="cityname" id="city" placeholder="Search City"> 
              <div id="citylist"></div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </body>
</html>

<!--- Autocomplete textbox jquery ajax --->
<script type="text/javascript">
  $(document).ready(function(){
      $("#city").on("keyup", function(){
        var city = $(this).val();
        if (city !=="") {
          $.ajax({
            url:"action.php",
            type:"POST",
            cache:false,
            data:{city:city},
            success:function(data){
              $("#citylist").html(data);
              $("#citylist").fadeIn();
            }  
          });
        }else{
          $("#citylist").html("");  
          $("#citylist").fadeOut();
        }
      });

      // click one particular city name it's fill in textbox
      $(document).on("click","li", function(){
        $('#city').val($(this).text());
        $('#citylist').fadeOut("fast");
      });
  });
</script>

PHP Code for search data from database

action.php

<?php
	
	// include database connection file

	include_once "dbConfig.php";

	// autocomplete textbox jquery ajax in PHP
	
	if (isset($_POST['city'])) {

  		$output = "";
  		$city = $_POST['city'];
  		$query = "SELECT * FROM users WHERE city_name LIKE '%$city%'";
  		$result = $con->query($query);

  		$output = '<ul class="list-unstyled">';		

  		if ($result->num_rows > 0) {
  			while ($row = $result->fetch_array()) {
  				$output .= '<li>'.ucwords($row['city_name']).'</li>';
  			}
  		}else{
  			  $output .= '<li> City not Found</li>';
  		}
  		
	  	$output .= '</ul>';
	  	echo $output;
	}

?>

Output

Autocomplete Textbox using jQuery AJAX in PHP MySql

You can always support by sharing on social media or recommending my blog to your friends and colleagues. If you have any suggestions or problems about this tutorial, please comment on the form below.😊