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.

Read Also:  Laravel 5.8 Autocomplete Textbox Fields Using jQuery

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 :

Read Also:  Check if Object is empty in Laravel 6 Examples

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.

About Pakainfo

I am Jaydeep Gondaliya, a software engineer, the founder and the person running Pakainfo. I'm a full-stack developer, entrepreneur and owner of Pakainfo.com. I live in India and I love to write tutorials and tips that can help to other artisan, a Passionate Blogger, who love to share the informative content on PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.

View all posts by Pakainfo →

Leave a Reply

Your email address will not be published. Required fields are marked *