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
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)
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.