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.
<?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); }); });
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.