jquery autocomplete multiple fields with single auto-select request Best 2 Example

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

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.

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.
jquery autocomplete multiple fields with single auto-select request

 
 

  

   

    
Productname
    
Name
    
Age
    
Email
    
Salary
   
  
  

   

    

    

    

    

    

   
  
 
 

 
	

Step 4. PHP Code (jquery autocomplete multiple fields with single auto-select request)
$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 = "";

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


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.


 
Related posts:

jquery autocomplete multiple fields with single auto-select request
Dynamically add multiple input fields and submit to database with jquery and php