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.

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

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.

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

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 :

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.


Related FAQ

Here are some more FAQ related to this Article:

  1.   Ajax PHP MySQL Creating Autocomplete Search Suggestion
  2.   Like Dislike system with PHP and MySQL
  3.   How to Check Uncheck All Checkboxes Using Jquery?
  4.   javascript String to Get Hours and Minutes
  5.   Laravel 6.2 Disable CSRF Protection on Specific Routes
  6.   PHP MySQL Dynamic Treeview using jQuery Ajax Example
  7.   Laravel 6 Joins Example Tutorial
  8.   PHP Autocomplete Input tags with Dynamic Data using jquery Ajax
  9.   Laravel Sweet Alert AJAX CRUD Tutorial
  10.   Laravel 6 insert query Example