Today, We want to share with you Chosen Ajax Autocomplete Textbox using jQuery, PHP and MySQL.In this post we will show you Autocomplete Textbox using jQuery, PHP and MySQLi, hear for Ajax PHP MySQL Creating Autocomplete Search Suggestion we will give you demo and example for implement.In this post, we will learn about PHP Autocomplete Input tags with Dynamic Data using jquery Ajax
with an example.

Chosen Ajax Autocomplete Textbox using jQuery, PHP and MySQL

Contents

There are the Following The simple About Chosen Ajax Autocomplete Textbox using jQuery, PHP and MySQL Full Information With Example and source code.

As I will cover this Post with live Working example to develop Jquery Chosen plugin – dynamically populate list by Ajax, so the PHP – Jquery Chosen Ajax Autocomplete for this example is following below.

Step 1: Make a MySQL Database Table

Lest start, I want to make MySQL database and table, therefor here i made “products” database and “products” table with product id as well as product name column. We can simply make MySQL “products” table as following simple sql query.

SQL Query:

CREATE TABLE IF NOT EXISTS `products` (
  `id` int(10) unsigned NOT NULL AUTO_INCREMENT,
  `name` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci AUTO_INCREMENT=24 ;

Step 2: Make index.php

Now, I want to make simple root PHP index.php file as well as i made form with one HTML input text box using jquery chosen. I also some easy source code for multiple add more fields in jquery examples. therefor let’s make simple index.php file and put some bellow source code.

index.php

<!DOCTYPE html>
<html>
<head>
  <title>jQuery Chosen autocomplete with PHP and AJAX - pakainfo.com</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />

 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>

<h1>jQuery Chosen autocomplete with PHP and AJAX</h1> 
<div class="container pakainfo">
  <div class="pakainfo panel panel-primary">
    <div class="panel-heading">jQuery Chosen autocomplete with PHP and AJAX - pakainfo.com</div>
    <div class="panel-body pakainfo">
      <form>
        <select class="form-control pakainfo select-box">
          <option>Select Products</option>
        </select>
      </form>
    </div>
  </div>
</div>
 
<script type="text/javascript">
  $(".select-box").chosen();
 
  $('.chosen-search input').autocomplete({
    source: function( request, response ) {
      $.ajax({
        url: "request_ajax.php?name="+request.term,
        dataType: "json",
        success: function( data ) {
          $('.select-box').empty();
          response( $.map( data, function( product ) {
            $('.select-box').append('<option value="'+product.id+'">' + product.name + '</option>');
          }));
          $(".select-box").trigger("chosen:updated");
        }
      });
    }
  });
</script>
 
</body>
</html>

Step 3: Create request_ajax.php File

In this Last step, I shall simple source code for fetching PHP jquery ajax data from MySQL database using simple mysql query. Therefor We have to make a simple request_ajax.php and put bellow some source code:

Also Read This 👉 create custom seo friendly url in vuejs Example

request_ajax.php

<?php
    
    $hostName = "localhost";
    $username = "root";
    $password = "jaydeepGondaliya";
    $dbname = "products";
 
    $mysqli = new mysqli($hostName, $username, $password, $dbname); 
    $sql = "SELECT * FROM products WHERE name LIKE '%".$_GET['name']."%'"; 
    $all_result = $mysqli->query($sql);
 
    $data_response = [];
    while($row = mysqli_fetch_assoc($all_result)){
       $data_response[] = array("id"=>$row['id'], "name"=>$row['name']);
    } 
    echo json_encode($data_response);
 
?>

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 Chosen Ajax Autocomplete Textbox using jQuery, PHP and MySQL.
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.