AdSense


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. 

This Three steps to implement autocomplete Search

  1. Create a database connection
  2. Create an autocomplete search form
  3. Create PHP code for search from database

1. Create a database connection
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); 
	}

?>


2.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>

3.Create PHP code for search 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

If you want to implement this code in your project than download on click the download button in below

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

1 Comments

Post a Comment

Previous Post Next Post