Dynamic Autocomplete Textbox in jQuery Ajax

Dynamic Autocomplete Textbox in jQuery Ajax

Today, We want to share with you Dynamic Autocomplete Textbox in jQuery Ajax.In this post we will show you autocomplete textbox using jquery ajax in php, hear for autocomplete textbox in php mysql with ajax we will give you demo and example for implement.In this post, we will learn about jquery autocomplete from database javascript with an example.

Dynamic Autocomplete Textbox in jQuery Ajax

There are the Following The simple About Dynamic Autocomplete Textbox in jQuery Ajax Full Information With Example and source code.

Another must read:  Calling functions inside Vue.js template

As I will cover this Post with live Working example to develop jQuery Autocomplete Textbox with Ajax PHP MySQL, so the jquery autocomplete ajax for this example is following below.

Autocomplete Textbox using jQuery, PHP and MySQL

List of all Google Adsense, VueJS, AngularJS, PHP, Laravel Examples.

Index.php

<!DOCTYPE html>
<html>
<title>Demo - Dynamic Autocomplete Textbox in jQuery Ajax|Pakainfo.com</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Oswald">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open Sans">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>    
<style>
h1,h2,h3,h4,h5,h6 {font-family: "Oswald"}
body {font-family: "Open Sans"}
</style>
      <script>
  $(function() {
    $( "#products" ).autocomplete({
      source: 'search.php'
    });
  });
  </script>
<body class="w3-light-grey">
 
<div class="w3-content" style="max-width:1600px">

  <!-- Header -->
  <header class="w3-container w3-center w3-padding-48 w3-white">
    <h1 class="w3-xxxlarge"><a href="http://www.pakainfo.com/"><img src="img/pakainfo.jpg" alt="Welcome to Pakainfo" style="width:20%" class="w3-padding-16"></a></h1>
    <h6>Welcome to our <span class="w3-tag">Pakainfo Tutorial</span></h6>
     <p>jquery autocomplete multiple fields using jquery ajax php and mysql</p> 
  </header>
  
  <!-- Image header -->
 

  <!-- Grid -->
  <div class="w3-row w3-padding w3-border">

    <!-- Website entries -->
    <div class="w3-col l12 s12">
    
      <!-- Website entry -->
      <div class="pakainfo w3-container w3-white w3-margin w3-padding-large">
        
          <h2 style="text-align: center";>Simple Autocomplete textbox using jQuery, PHP and MySQL by pakainfo.com</h2>
          <br>
          <div class="ui-widget" style="text-align: center";>
             <label for="products">Skills: </label>
           <input id="products">
          </div>
            
      </div>
      
    </div>

  </div>

</div>

</body>
</html>

Search.php

<?php
$dbHost = 'localhost';
$dbUsername = 'root';
$dbPassword = 'atmiya256';
$dbName = 'jaydeep_gondaliya_pakainfo';
//connect with the database
$db = new mysqli($dbHost,$dbUsername,$dbPassword,$dbName);
//fetch search term
$searchTerm = $_GET['term'];
//fetch matched data from products table
$query = $db->query("SELECT * FROM products WHERE product LIKE '%".$searchTerm."%' ORDER BY product ASC");
while ($row = $query->fetch_assoc()) {
    $data[] = $row['product'];
}
//return json product data
echo json_encode($data);
?>

Angular 6 CRUD Operations Application Tutorials

Read :

Another must read:  Ajax Login System with jQuery PHP and MySQLi

Summary

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

I hope you get an idea about Dynamic Autocomplete Textbox in jQuery Ajax.
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.