jquery autocomplete multiple fields with single auto-select request : Example demo with Source code.

Today, We want to share with you Autocomplete multiple fields in a single select using ajax.In this post we will show you How to autocomplete data on multiple fields with jQuery and AJAX?, hear for jQuery Autocomplete Multiple Fields Using jQuery, Ajax, PHP and MySQL we will give you demo and example for implement.In this post, we will learn about Autocomplete Textbox with Multiple Values using jQuery PHP and MySQL with an example.

jquery autocomplete multiple fields with single auto-select request

Contents

Step 1. Database Table structure

We are using products table in the “jquery autocomplete multiple fields with single auto-select request” example.

CREATE TABLE `products` (
  `id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
  `productname` varchar(80) NOT NULL,
  `pname` varchar(60) NOT NULL,
  `lname` varchar(60) NOT NULL,
  `pcode` varchar(80) NOT NULL,
  `sku` int(2) NOT NULL,
  `price` varchar(10) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Step 2. Dataabse Configuration

Make a new file name like as config.php to define database connection.

<?php
$host = "localhost";
$product = "root";
$password = "";
$dbname = "pakainfo_v1";

$con = mysqli_connect($host, $product, $password,$dbname);
// Check connection
if (!$con) {
 die("Connection failed: " . mysqli_connect_error());
}

Step 1. HTML

Make a HTML table layout with input elements. here also Includes jQuery UI autocomplete on the first of all html textbox with jQuery. and then created an Add more button to add a new html table row when it gets clicked.

<h4>jquery autocomplete multiple fields with single auto-select request</h4>
<div class="container">
 
 <table border='1' style='border-collapse: collapse;'>
  <thead>
   <tr>
    <th>Productname</th>
    <th>Name</th>
    <th>Age</th>
    <th>Email</th>
    <th>Salary</th>
   </tr>
  </thead>
  <tbody>
   <tr class='tr_input'>
    <td><input type='text' class='productname' id='productname_1' placeholder='Enter productname'></td>
    <td><input type='text' class='name' id='name_1' ></td>
    <td><input type='text' class='sku' id='sku_1' ></td>
    <td><input type='text' class='pcode' id='pcode_1' ></td>
    <td><input type='text' class='price' id='price_1' ></td>
   </tr>
  </tbody>
 </table>
 <br>
 <input type='button' value='Add more' id='addmore'>
</div>

Step 4. PHP Code (jquery autocomplete multiple fields with single auto-select request)

<?php
include "config.php";

$request = $_POST['request']; // request

// Get productname list
if($request == 1){
 $search = $_POST['search'];

 $query = "SELECT * FROM products WHERE productname like'%".$search."%'";
 $result = mysqli_query($con,$query);
 
 while($row = mysqli_fetch_array($result) ){
  $productData[] = array("value"=>$row['id'],"label"=>$row['productname']);
 }

 // encoding array to json format
 echo json_encode($productData);
 exit;
}

// Get details
if($request == 2){
 $productid = $_POST['productid'];
 $sql = "SELECT * FROM products WHERE id=".$productid;

 $result = mysqli_query($con,$sql); 

 $products_arr = array();

 while( $row = mysqli_fetch_array($result) ){
  $productid = $row['id'];
  $description = $row['pname']." ".$row['lname'];
  $pcode = $row['pcode'];
  $sku = $row['sku'];
  $price = $row['price'];

  $products_arr[] = array("id" => $productid, "name" => $description,"pcode" => $pcode, "sku" =>$sku, "price" =>$price);
 }

 // encoding array to json format
 echo json_encode($products_arr);
 exit;
}

Step 5. jQuery Script

simple jquery script for jquery autocomplete multiple fields with single auto-select request.

$(document).ready(function(){

 $(document).on('keydown', '.productname', function() {
 
  var id = this.id;
  var splitid = id.split('_');
  var index = splitid[1];

  // Initialize jQuery UI autocomplete
  $( '#'+id ).autocomplete({
   source: function( request, productData ) {
    $.ajax({
     url: "getDetails.php",
     type: 'post',
     dataType: "json",
     data: {
      search: request.term,request:1
     },
     success: function( data ) {
      productData( data );
     }
    });
   },
   select: function (event, ui) {
    $(this).val(ui.item.label); // display the selected text
    var productid = ui.item.value; // selected value

    // AJAX
    $.ajax({
     url: 'getDetails.php',
     type: 'post',
     data: {productid:productid,request:2},
     dataType: 'json',
     success:function(productData){
 
      var len = productData.length;

      if(len > 0){
       var id = productData[0]['id'];
       var name = productData[0]['name'];
       var pcode = productData[0]['pcode'];
       var sku = productData[0]['sku'];
       var price = productData[0]['price'];

       // Set value to textboxes
       document.getElementById('name_'+index).value = name;
       document.getElementById('sku_'+index).value = sku1;
       document.getElementById('pcode_'+index).value = pcode;
       document.getElementById('price_'+index).value = price;
 
      }
 
     }
    });

    return false;
   }
  });
 });
 
 // Add more
 $('#addmore').click(function(){

  // Get last id 
  var lastname_id = $('.tr_input input[type=text]:nth-child(1)').last().attr('id');
  var split_id = lastname_id.split('_');

  // New index
  var index = Number(split_id[1]) + 1;

  // Make row with HTML input elements
  var html = "<tr class='tr_input'><td><input type='text' class='productname' id='productname_"+index+"' placeholder='Enter productname'></td><td><input type='text' class='name' id='name_"+index+"' ></td><td><input type='text' class='sku' id='sku_"+index+"' ></td><td><input type='text' class='pcode' id='pcode_"+index+"' ></td><td><input type='text' class='price' id='price_"+index+"' ></td></tr>";

  // Append data
  $('tbody').append(html);
 
 });
});

jQuery-Autocomplete-Mutiple-Fields-Using-jQuery-Ajax-PHP-and-MySQL

I hope you get an idea about jquery autocomplete multiple fields with single auto-select request.
I would like to have feedback on my infinityknow.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.