DEV Community

Lalit Kumar
Lalit Kumar

Posted on

Jquery autocomplete multiple fields using jquery ajax PHP and MySQL.

An Autocomplete textbox allows the users to select the single value from the list. Here we will learn how we can autocomplete the multiple values from the auto-suggestion list. We will follow the following process to create an autocomplete textbox with multiple selection values in PHP.


title: "Jquery autocomplete multiple fields using jquery ajax PHP and MySQL."
tags: php

canonical_url: https://kodlogs.com/blog/188/jquery-autocomplete-multiple-fields-using-jquery-ajax-mysql

  • First, create the MySQL database connection.
  • GET parameter with the query name will help to get the search query.
  • Send the GET parameter value to a PHP script using Ajax
  • Search the match data from MYSQL database
  • Store the search match data in an array.
  • Send data in JSON format. Index.php
<!DOCTYPE html>
<html>
    <head>
        <title>AutoComplete Textbox with Multiple Field </title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
    </head>
<body>

    <div class="container">
       <h1 align="center">AutoComplete Textbox with Multiple Field using jQuery in PHP</h1>

         <div class="row">
         <div class="col-md-2">

         </div>
         <div class="col-md-8">
         <div class="form-group">
         <label>Enter Multiple subjects Name</label>
             <div class="input-group">
              <input type="text" id="search_data" placeholder="" autocomplete="off" class="form-control input-lg" />
         <div class="input-group-btn">
             <button type="button" class="btn btn-primary btn-lg" id="search">Get Value</button>
         </div>
         </div>
       <br >
      <span id="subject_name"></span>
      </div>
     </div>
       <div class="col-md-2">
       </div>
     </div>
        </div>
    </body>
</html>
<script>
  $(document).ready(function(){

    $('#search_data').tokenfield({
        autocomplete :{
            source: function(request, response)
            {
                jQuery.get('fetch.php', {
                    query : request.term
                }, function(data){
                    data = JSON.parse(data);
                    response(data);
                });
            },
            delay: 100
        }
    });

    $('#search').click(function(){
        $('#subject_name').text($('#search_data').val());
    });

  });
</script>
Enter fullscreen mode Exit fullscreen mode

Fetch.php

<?php
$data = array();
if(isset($_GET["query"]))
{
 $connect = new PDO("mysql:host=localhost; dbname=courses", "root", "");

 $query = "
 SELECT subject_name FROM Subjects 
 WHERE subject_name LIKE '".$_GET["query"]."%' 
 ORDER BY subject_name ASC 
 LIMIT 15 
 ";

 $statement = $connect->prepare($query);

 $statement->execute();

 while($row = $statement->fetch(PDO::FETCH_ASSOC))
 {
  $data[] = $row["country_name"];
 }
}

echo json_encode($data);

?>
Enter fullscreen mode Exit fullscreen mode

Top comments (0)