Please support us by disabling ad blocker for smarttutorials.net ...

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

Posted by & filed under Ajax, HTML5, JQUERY, MYSQL, PHP.

In one of the previous tutorial, I had implemented jQuery autocomplete using jQuery, Ajax, PHP and MySQL. Before continuing this, please refer this following tutorial for complete basics and integration of jQuery autocomplete.

jquery autocomplete integration

jQuery Autocomplete Search using PHP, MySQL and Ajax

Autocomplete Using jQuery, Ajax, PHP and MySQL

Please refer following my latest tutorial on jQuery autocomplete

Invoice System Using jQuery AutoComplete

jQuery Autocomplete Post Tagging System Like In WordPress

In this tutorial I am going to show how to populate multiple textfields using single jQuery autocomplete select. For example I am going search country name on country name textfield using jQuery autocomplete, finally results will show list of country names that matches your search. While selecting country name from any one of the search results, it will populate that corresponding country Number, Country Phone code and Country code will be populated automatically in their respective textfields.

 

 

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

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

Step 1: Create Your Sample Database, Table and Confguration Files:

Please refer my previous tutorial to create the sample database, tables and php configuration files.

jQuery Autocomplete Search using PHP, MySQL and Ajax

 

Step 2: Create Your HTML Form for this jQuery Autocomplete:

Using following html script create your HMTL form for jQuery autocomplete.

 <form action="index.php" name="students" method="post" id="students">
    <input type="text" name="countryname[]" id="countryname_1" class="ui-autocomplete-input">
    <input type="text" name="country_no[]" id="country_no_1" class="ui-autocomplete-input">
    <input type="text" name="phone_code[]" id="phone_code_1" class="ui-autocomplete-input">
    <input type="text" name="country_code[]" id="country_code_1" class="ui-autocomplete-input">
 </form>

Please ensure following js files and css are added in your php or html page.

<link rel="stylesheet" href="css/jquery-ui-1.10.3.custom.min.css" />
<script src="js/jquery-1.10.2.min.js"></script>	
<script src="js/jquery-ui-1.10.3.custom.min.js"></script>

Step 3: Write your jQuery Autocomplete Script:

 

All we need is when user starts to search on country name textfield based on the search, we need to show autocomplete search results. For that we need select country name text field and implement autcomplete method on it.

$('#countryname_1').autocomplete({
	source: function( request, response ) {
  		$.ajax({
  			url : 'ajax.php',
  			dataType: "json",
			data: {
			   name_startsWith: request.term,
			   type: 'country_table',
			   row_num : 1
			},
			 success: function( data ) {
				 response( $.map( data, function( item ) {
				 	var code = item.split("|");
					return {
						label: code[0],
						value: code[0],
						data : item
					}
				}));
			}
  		});
  	},
  	autoFocus: true,	      	
  	minLength: 0,
  	select: function( event, ui ) {
		var names = ui.item.data.split("|");						
		$('#country_no_1').val(names[1]);
		$('#phone_code_1').val(names[2]);
		$('#country_code_1').val(names[3]);
	}		      	
});

I had set minLength to 0, so when user start to type his first letter or press space button. It will makes ajax request and brings out the jQuery autocomplete results from MySQL database. You may set jQuery autocomplete minLength based on your need for ex. 2 or 3.

In the jQuery autocomplete success method, I am getting the results and splits the country name and assign it to the label and value object. When user selects his desired result from the list of autocomplete result list, jQuery autocomplete select method is triggered. Where selected result is splited as well as assigned to the Country Number, Country Phone code and Country code textfields.

Step 4: jQuery Autocomplete PHP Script:

Here is jQuery autocomplete PHP configuration file and php script for jQuery autocomplete multifields.

<?php
/*
Site : http:www.smarttutorials.net
Author :muni
*/
define('DB_HOST', 'localhost');
define('DB_NAME', 'autocomplete');
define('DB_USERNAME','root');
define('DB_PASSWORD','');

$con = mysqli_connect(DB_HOST, DB_USERNAME, DB_PASSWORD, DB_NAME);
if( mysqli_connect_error()) echo "Failed to connect to MySQL: " . mysqli_connect_error();

php script for jQuery autocomplete for multiple textfields.

<?php
/*
Site : http:www.smarttutorials.net
Author :muni
*/
require_once 'config.php';
if($_POST['type'] == 'country_table'){
	$row_num = $_POST['row_num'];
	$result = mysqli_query($con, "SELECT name, numcode, phonecode, iso3 FROM country where name LIKE '".strtoupper($_POST['name_startsWith'])."%'");	
	$data = array();
	while ($row = mysqli_fetch_assoc($result)) {
		$name = $row['name'].'|'.$row['numcode'].'|'.$row['phonecode'].'|'.$row['iso3'].'|'.$row_num;
		array_push($data, $name);	
	}	
	echo json_encode($data);
}

.

Download Premium Only Scripts & 80+ Demo scripts Instantly at just 1.95 USD per month + 10% discount to all Exclusive Scripts

If you want any of my script need to be customized according to your business requirement,

Please feel free to contact me [at] muni[at]smarttutorials.net

Note: But it will be charged based on your customization requirement

Get Updates, Scripts & Other Useful Resources to your Email

Join 10,000+ Happy Subscribers on feedburner. Click to Subscribe (We don't send spam)
Every Email Subsciber could have access to download 100+ demo scripts & all future scripts.

  • How do we change it so that I can populate the value into a span or div element instead of a textfield?

    $(‘#country_no_1’).val(names[1]);

  • Got it!

    $(‘#country_no_1’).text(names[1]);

  • you can use html too … like $(‘#country_no_1’).html(names[1]);

  • nicowizz

    Thank you so much for your good work ! The script works well with your files. But I have a problem when I want to connect to another database with tables and different fields. Unable to run the script by changing yet config.php and ajax.php ; could you tell me if there is anything to change? thank you

  • seangore

    It’s not an html5 form without proper input types, and arguably fieldsets with legends. You should have used input type=tel on the county area code, included placeholders, and added required, or maybe even autofocus. You’re also missing labels…

    But more to the point, if you were really doing html5, you could have avoided all of this JavaScript entirely with the use of the datalist attribute. It lets the browser natively do autocomplete. No need for jQuery UI, or any libraries…

    I will stop there, as I know thIs was just a demo, but I would encourage you to have another look at your markup for those beginners who are new to html (not html5).

  • Thank you Seangore..

    I don’t think hmtl5 itself will make ajax request and pull data from db… That why i had used jquery and jquery ui….

  • Great tutorial thank you for this.. but do you have anything like invoice??Auto complete with a price and calculations…if you have please share with us..I am a beginner.. 🙂

  • John Doe

    There is an error in the demo. Populate 3 to 4 fields by add more button. Then select country in second row, it will fill the data in 3rd row.

  • Issue is fixed… thak you John… 🙂

  • John Doe

    Its not fixed yet. Now it feels the data in 4th row.

  • just clear your cache and try in the live demo john …..

    http://demo.smarttutorials.net/jquery-autocomplete-mutiple-fields-ajax-php-mysql/

    Wish you very happy new year…..

  • John Doe

    Oh my bad. Sorry, It works fine. Thanks and happy new year to you too.

  • Dony Aditya

    can u add button to save data to another table, when we already fill the row

    thank you 🙂

  • palani

    Hi
    I am having 4 column, first 3 from one table and second 2 from another table. But their is no interaction between to table. I can able to display first 3 column. But I am unable to fetch value from 2nd table. can you please help me

  • you are referring two tables that are html table or mysql tables? , if it mysql table get records from mysql table using join and fill respective fields…

  • palani

    S. No

    Country Name

    Country Number

    Country Phone code

    CTYPE code

    TYPE code

    1.

    – Delete

    + Add More

    /**

    * Site : http:www.smarttutorials.net

    * @author muni

    */

    $(“.delete”).on(‘click’, function() {

    $(‘.case:checkbox:checked’).parents(“tr”).remove();

    $(‘.check_all’).prop(“checked”, false);

    check();

    });

    var i=$(‘table tr’).length;

    $(“.addmore”).on(‘click’,function(){

    count=$(‘table tr’).length;

    var data=””+count+”.”;

    data +=” “;

    $(‘table’).append(data);

    row = i ;

    $(‘#countryname_’+i).autocomplete({

    source: function( request, response ) {

    $.ajax({

    url : ‘ajax.php’,

    dataType: “json”,

    method: ‘post’,

    data: {

    name_startsWith: request.term,

    type: ‘country_table’,

    row_num : row

    },

    success: function( data ) {

    response( $.map( data, function( item ) {

    var code = item.split(“|”);

    return {

    label: code[0],

    value: code[0],

    data : item

    }

    }));

    }

    });

    },

    autoFocus: true,

    minLength: 0,

    select: function( event, ui ) {

    var names = ui.item.data.split(“|”);

    id_arr = $(this).attr(‘id’);

    id = id_arr.split(“_”);

    $(‘#country_no_’+id[1]).val(names[1]);

    $(‘#phone_code_’+id[1]).val(names[2]);

    $(‘#country_code_’+id[1]).val(names[3]);

    }

    });

    $(‘#ctype_code_’+i).autocomplete({

    source: function( request, response ) {

    $.ajax({

    url : ‘ajax1.php’,

    dataType: “json”,

    method: ‘post’,

    data: {

    name_startsWith: request.term,

    type: ‘country_table’,

    row_num : row

    },

    success: function( data ) {

    response( $.map( data, function( item ) {

    var code = item.split(“|”);

    return {

    label: code[4],

    value: code[4],

    data : item

    }

    }));

    }

    });

    },

    autoFocus: true,

    minLength: 0,

    select: function( event, ui ) {

    var names = ui.item.data.split(“|”);

    id_arr = $(this).attr(‘id’);

    id = id_arr.split(“_”);

    $(‘#ctype_code_’+id[1]).val(names[4]);

    $(‘#type_code_’+id[1]).val(names[5]);

    }

    });

    $(‘#phone_code_’+i).autocomplete({

    source: function( request, response ) {

    $.ajax({

    url : ‘ajax.php’,

    dataType: “json”,

    method: ‘post’,

    data: {

    name_startsWith: request.term,

    type: ‘country_table’,

    row_num : row

    },

    success: function( data ) {

    response( $.map( data, function( item ) {

    var code = item.split(“|”);

    return {

    label: code[2],

    value: code[2],

    data : item

    }

    }));

    }

    });

    },

    autoFocus: true,

    minLength: 0,

    select: function( event, ui ) {

    var names = ui.item.data.split(“|”);

    id_arr = $(this).attr(‘id’);

    id = id_arr.split(“_”);

    $(‘#country_no_’+id[1]).val(names[1]);

    $(‘#country_code_’+id[1]).val(names[3]);

    $(‘#countryname_’+id[1]).val(names[0]);

    }

    });

    $(‘#country_no_’+i).autocomplete({

    source: function( request, response ) {

    $.ajax({

    url : ‘ajax.php’,

    dataType: “json”,

    method: ‘post’,

    data: {

    name_startsWith: request.term,

    type: ‘country_table’,

    row_num : row

    },

    success: function( data ) {

    response( $.map( data, function( item ) {

    var code = item.split(“|”);

    return {

    label: code[1],

    value: code[1],

    data : item

    }

    }));

    }

    });

    },

    autoFocus: true,

    minLength: 0,

    select: function( event, ui ) {

    var names = ui.item.data.split(“|”);

    id_arr = $(this).attr(‘id’);

    id = id_arr.split(“_”);

    $(‘#country_code_’+id[1]).val(names[3]);

    $(‘#phone_code_’+id[1]).val(names[2]);

    $(‘#countryname_’+id[1]).val(names[0]);

    }

    });

    i++;

    });

    function select_all() {

    $(‘input[class=case]:checkbox’).each(function(){

    if($(‘input[class=check_all]:checkbox:checked’).length == 0){

    $(this).prop(“checked”, false);

    } else {

    $(this).prop(“checked”, true);

    }

    });

    }

    function check(){

    obj=$(‘table tr’).find(‘span’);

    $.each( obj, function( key, value ) {

    id=value.id;

    $(‘#’+id).html(key+1);

    });

    }

    $(‘#countryname_1’).autocomplete({

    source: function( request, response ) {

    $.ajax({

    url : ‘ajax.php’,

    dataType: “json”,

    method: ‘post’,

    data: {

    name_startsWith: request.term,

    type: ‘country_table’,

    row_num : 1

    },

    success: function( data ) {

    response( $.map( data, function( item ) {

    var code = item.split(“|”);

    return {

    label: code[0],

    value: code[0],

    data : item

    }

    }));

    }

    });

    },

    autoFocus: true,

    minLength: 0,

    select: function( event, ui ) {

    var names = ui.item.data.split(“|”);

    $(‘#country_no_1’).val(names[1]);

    $(‘#phone_code_1’).val(names[2]);

    $(‘#country_code_1’).val(names[3]);

    }

    });

    $(‘#country_code_1’).autocomplete({

    source: function( request, response ) {

    $.ajax({

    url : ‘ajax.php’,

    dataType: “json”,

    method: ‘post’,

    data: {

    name_startsWith: request.term,

    type: ‘country_code’,

    row_num : 1

    },

    success: function( data ) {

    response( $.map( data, function( item ) {

    var code = item.split(“|”);

    return {

    label: code[3],

    value: code[3],

    data : item

    }

    }));

    }

    });

    },

    autoFocus: true,

    minLength: 0,

    select: function( event, ui ) {

    var names = ui.item.data.split(“|”);

    $(‘#country_no_1’).val(names[1]);

    $(‘#phone_code_1’).val(names[2]);

    $(‘#countryname_1’).val(names[0]);

    },

    open: function() {

    $( this ).removeClass( “ui-corner-all” ).addClass( “ui-corner-top” );

    },

    close: function() {

    $( this ).removeClass( “ui-corner-top” ).addClass( “ui-corner-all” );

    }

    });

    $(‘#country_no_1’).autocomplete({

    source: function( request, response ) {

    $.ajax({

    url : ‘ajax.php’,

    dataType: “json”,

    method: ‘post’,

    data: {

    name_startsWith: request.term,

    type: ‘country_no’,

    row_num : 1

    },

    success: function( data ) {

    response( $.map( data, function( item ) {

    var code = item.split(“|”);

    return {

    label: code[1],

    value: code[1],

    data : item

    }

    }));

    }

    });

    },

    autoFocus: true,

    minLength: 0,

    select: function( event, ui ) {

    var names = ui.item.data.split(“|”);

    $(‘#country_code_1 ‘).val(names[3]);

    $(‘#phone_code_1’).val(names[2]);

    $(‘#countryname_1’).val(names[0]);

    },

    open: function() {

    $( this ).removeClass( “ui-corner-all” ).addClass( “ui-corner-top” );

    },

    close: function() {

    $( this ).removeClass( “ui-corner-top” ).addClass( “ui-corner-all” );

    }

    });

    $(‘#phone_code_1’).autocomplete({

    source: function( request, response ) {

    $.ajax({

    url : ‘ajax.php’,

    dataType: “json”,

    method: ‘post’,

    data: {

    name_startsWith: request.term,

    type: ‘phone_code’,

    row_num : 1

    },

    success: function( data ) {

    response( $.map( data, function( item ) {

    var code = item.split(“|”);

    return {

    label: code[2],

    value: code[2],

    data : item

    }

    }));

    }

    });

    },

    autoFocus: true,

    minLength: 0,

    select: function( event, ui ) {

    var names = ui.item.data.split(“|”);

    $(‘#country_code_1 ‘).val(names[3]);

    $(‘#country_no_1 ‘).val(names[1]);

    $(‘#countryname_1’).val(names[0]);

    },

    open: function() {

    $( this ).removeClass( “ui-corner-all” ).addClass( “ui-corner-top” );

    },

    close: function() {

    $( this ).removeClass( “ui-corner-top” ).addClass( “ui-corner-all” );

    }

    });

    ajax.php

    require_once ‘config.php’;

    if($_POST[‘type’] == ‘country_table’){

    $row_num = $_POST[‘row_num’];

    $name = $_POST[‘name_startsWith’];

    $query = “SELECT * FROM $version_type where UPPER(VRPID) LIKE ‘”.strtoupper($name).”%'”;

    $result = odbc_exec($connection, $query);

    $data = array();

    while ($row = odbc_fetch_array($result)) {

    $name = trim($row[‘VRPID’]).’-‘.trim($row[‘VRVERS’]).’|’.trim($row[‘VRPID’]).’|’.trim($row[‘VRVERS’]).’|’.$row_num;

    array_push($data, $name);

    }

    echo json_encode($data);

    }

    ajax1.php

    require_once ‘config.php’;

    if($_POST[‘type’] == ‘country_t’){

    $row_num = $_POST[‘row_num’];

    $name = $_POST[‘name_startsWith’];

    $query = “SELECT * FROM $database.FQ64006 where UPPER(SCYQ64CTYPE) LIKE ‘”.strtoupper($name).”%'”;

    $result = odbc_exec($connection, $query);

    $data = array();

    while ($row = odbc_fetch_array($result)) {

    $name = trim($row[‘SCYQ64CTYPE’]).’|’.trim($row[‘SCYQ64TYPE’]).’|’.$row_num;

    array_push($data, $name);

    }

    echo json_encode($data);

    }

  • i think you want to fill autocomplete for the following fields right… ctype_code_1 & type_code_1 ? ., u never made ajax call with the above fields… make autocomplete ajax call with the fields it will work..

  • Blair Carriere

    Great Job muni! 🙂
    I have a mysql database named autocomplete with 1 table named song and 3 columns id, artist, title and 30,000 rows.
    I only want the fields on index.php Example: (S.NO) | (Search by song ARTIST…) | (Search by song TITLE…)
    Example: I have 640 song titles for the artist Elvis Presley. So If I select Elvis Presley in the ARTIST field it should only show me 640 possible song titles and not all 30,000. Vice versa
    1) How can my example above be achieved?
    2) How do I remove the extra columns from auto.js?
    3) How do I add a button that will email the data selected?
    4) Can it be made to search for for part of the ARTIST name? Example: Presley

  • refer this following tutorial…

    1 & 2 http://www.smarttutorials.net/invoice-system-using-jquery-autocomplete/

    3. Keep everything in form… so $(“form”).serialize() gives all data in json format… Format this data according your need and send it via email.

    4. in php chnage where condition

  • palani

    Thanks Muni.

    I made autocomplete for ctype_code_1

    But its not working

    code

    $(‘#ctype_code_1’).autocomplete({

    source: function( request, response ) {

    $.ajax({

    url : ‘ajax1.php’,

    dataType: “json”,

    method: ‘post’,

    data: {

    name_startsWith: request.term,

    type: ‘ctype_table’,

    row_num : 1

    },

    success: function( data ) {

    response( $.map( data, function( item ) {

    var code = item.split(“|”);

    return {

    label: code[4],

    value: code[4],

    data : item

    }

    }));

    }

    });

    },

    autoFocus: true,

    minLength: 0,

    select: function( event, ui ) {

    var names = ui.item.data.split(“|”);

    $(‘#ctype_code_1’).val(names[4]);

    $(‘#type_code_1’).val(names[5]);

    }

    });

  • check following things

    1. Will it makes ajax request? while searching on the field.

    2. Did u get response from server?

  • palani

    If i keep the cursor there it will display all the 4 lines. but it is not displaying the value.

    if you want pls use the below link to test

    http://50.254.92.201/demo/jautocomplete/

  • Blair Carriere

    I’ve been at this forever… Any chance you could be more specific

  • Blair Carriere

    1 & 2) I went to the link provided, I’m confused. Where’s the tutorial I’m supposed to refer to?

    3) Could you be more specific?

    4) I referred to the link you provided & downloaded & installed the Demo Invoice System.
    It doesn’t function the same as your website Demo. With your website Demo Invoice System if you search in Item Name: “ate” the result is: “1969 Harley Davidson Ultimate Chopper”. On the Downloaded
    Demo Invoice System I installed if you search: “ate” I get nothing. But if I search: “1” it shows “1969 Harley Davidson Ultimate Chopper”. It seems to ONLY search alphabetically and not parts of the search field.

    Any help will be greatly appreciated… 😉

  • For demo purpose i am getting data from server. If you want data as in demo, you need to modify the SQL query to search condition….

  • Hacko

    Script is not working:
    There is an error:
    Notice: Undefined index: type in
    I changed if($_POST[‘type’] == ‘country_table’) to if(isset($_POST[‘type’]) == ‘country_table’) and no more error.
    But the script is not working anyway.
    I copy and paste from this website, i do not have download link. Can you help?

  • Blair Carriere

    What exactly do I have to modify to the SQL query search condition to make it like demo?

  • change query like this

    $query = “SELECT productCode, productName, buyPrice FROM products where quantityInStock !=0 and UPPER($type) LIKE ‘%”.strtoupper($name).”%'”; in ajax.php file

  • dil

    Thanks for your great tutorial. I implemented it. It works like a chime.

    I want to make all input areas ( county, name, fruit …) as one input and using drop-down list selection to trigger database column selection for individual cases. if you select “name” the autocomplete only shows “name” list, if you select “fruit”, the autocomplete only suggest “fruit”, how to do it, please help. Thanks.
    If I change the input field ID by drop-down selection, I am expecting ajax call and load appropriate data table. Following code is working only updating input ID, but there is no data loaded corresponding to selected ID of input field. How can I trigger the data call when I updating input field ID? Please help.
    This is what I did. HTML part.

    county
    fruit
    baby

    jQuery part:

    $(‘#list-select’).change(function(){
    var selection=$(this).find(‘option:selected’).val();
    console.log(selection);
    $(‘input.form-control’).attr(‘id’,selection+”);
    });
    })();

  • Yamuna Jasmine

    I was added one column additionally in this model and I want to disable the added column based on selected country name text box changes. Suggest me how to complete it. Thanks.

  • Yamuna Jasmine

    S. No

    Car Name

    City

    Year of Model

    Availability

    Feedback

    1.

    – Delete

    + Add More

    function test_hide(str)

    {

    if(str==’yes’)

    {

    document.getElementbyId(“feedback_1”).disabled=false;

    }

    else if(str ==’No’)

    {
    document.getElementbyId(“feedback_1”).disabled=true;
    }

    }

    I have to enable & disable the feedback input field based on availability (yes or no ) condition.How to complete it,please help. Thanks.

  • Hi Yamuna,

    In autocomplete select function you do enable/disable things you want..

    ,
    select: function( event, ui ) {

    }

  • Yamuna Jasmine

    select: function( event, ui ) {

    var avail_value1= $(‘#availability_1’).val();

    var value2= ‘Yes’;

    alert(avail_value1);

    if(value2= avail_value1)
    {
    $(‘#feedback_1’).prop(‘disabled’,true);
    }
    else if(value2!= avail_value1)
    {
    $(‘#feedback_1’).prop(‘disabled’,false);
    }

    }

  • Atul

    Hi, already i subscribed, but i did’t get any download link, please mail me download link to atulchowdary.t@gmail.com

  • Ed

    Registered for the blog, over 12 hours still hadn’t got the demo code link for source. Was able to use this along with other tutorials and get a working version. Please address your subscription and link distribution system.

    Great tutorial, really helped me figure this out after several hours of hitting dead ends. The hardest part was integrating the ajax call into the service as your description didn’t review the full scope. Working good now, looking forward to how I can apply this through my projects.

    Might be a fun idea to show people how they can iterate through a list of submitted values once they have fulfilled their desired form. I.e. after composing an order with autolookup skus and prices how to submit that data and check dynamic inputs.

    Looking forward to more tuts.

  • ricky yusuf

    Please Help…how to use disable or read only fungtion in autonumber. e.g View in my page

    noted :

    1.

    ths All 😀

  • freddy

    yes so hard to get the source, please anyone send to sidaurukfreddy@gmail.com

  • freddy

    Admin please send the code to learn it, sidaurukfreddy@gmail.com

  • freddy

    need source code, sidaurukfreddy@gmail.com

  • freddy

    can you send source code bro to sidaurukfreddy@gmail.com

  • If you become Premium user, you can easily download any script easily..

  • freddy

    yes but i need easy download without pay ? do you really make it for money?

  • freddy

    soory for anger me murni, now i can download it

  • freddy

    Hello Murni i want to ask in codeigniter, i have translate it to codeigniter, my question is how can i make operation math in your form, here i give code in codeignter http://adf.ly/1BwwfK

    and this is my problem, will big thanks for any help Murni, it help others too and you can post in your blog, Thanks,

    Thanks alot

  • freddy

    Hello admin, how can i make hidden value which came from database in your form, will be big thanks for any help, multiplication i have done now i want to make hidden value came from database, thanks

  • Arul Kumar

    hello admin ,when i select the item name in dropdown list and it will automatically show the price at another text box please help me thanks

  • Hi Arul,
    Please check following tutorial to get things done..

    http://www.smarttutorials.net/invoice-system-using-jquery-autocomplete/

  • Efektiv

    First thank you for this great tutorial. I have one question: How to or is it posible to autocomplete multiple fields if I type for exemple SAINT HELENA and not select it from dropdown? In demo if I do that nothing heppens.

  • Stephan A.J.

    Hi Muni, first of all thank you for this amazing tutorial. I need the text input emptied if someone decided not to click any result from the drop down menu. thx

  • Hi Stephen,

    Can you elaborate little bit..

  • Nisha Shah

    Subscribe seems to be just cheating. No download links are given after confirming subscription.

  • Hi Nisha,

    You will surely get the download after 12 hours… If you still have any problem, pls mail me.

  • Himanshu Aggarwal

    I want to fetch data from mysql using ajax checkbox filter can you help me

  • shea butter

    hi muni.. i cant retrieve the ajax file. the textbox for searching not function..when i enter the in textbox nothing display..

    auto1.php

    $(‘#staffName_1’).autocomplete({
    source: function( request, response ) {
    $.ajax({
    url : ‘auto.php’,
    dataType: “json”,
    data: {
    n: request.term,
    type: ‘s’,
    row_num : 1
    },
    success: function( data ) {
    response( $.map( data, function( item ) {
    var code = item.split(“|”);
    return {
    label: code[0],
    value: code[0],
    data : item
    }
    }));
    }
    });
    },
    autoFocus: true,
    minLength: 0,
    select: function( event, ui ) {

    var names = ui.item.data.split(“|”);
    $(‘#username_1’).val(names[1]);
    $(‘#password_1’).val(names[2]);
    $(‘#staffID_1’).val(names[3]);
    }
    });

     

    auto.php working good using sql server..

  • Jas

    hi can you please explain how type works in this code?

    what is country_table in type.

    my code is

    “php”

    and jquery is

    $(‘#businessName’).autocomplete({

    source: function( request, response ) {

    $.ajax({

    url : ‘auto_new.php’,

    dataType: “json”,

    data: {

    businessName_startsWith: request.term,

    type: ‘clientsid_table’,

    row_num : 1

    },

    success: function( data ) {

    response( $.map( data, function( item ) {

    var code = item.split(“|”);

    return {

    label: code[0],

    value: code[0],

    data : item

    }

    }));

    }

    });

    },

    autoFocus: true,

    minLength: 0,

    select: function( event, ui ) {

    var names = ui.item.data.split(“|”);

    $(‘#clientName’).val(names[1]);

    $(‘#address’).val(names[2]);

    }

    });

    This does not work
    please help me
    thanks

  • shilpa

    hii want to add multiple values to same text box how can i do using php mysql and jquery can anybody

  • hi shilpa,

    Please refer the following tutorial, you will get some idea

    http://www.smarttutorials.net/jquery-autocomplete-post-tagging-system-like-in-wordpress/

  • Raghavendra Nayaka

    Dear Muni,

    Please send me the code to for

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

    to email id: ragunayaka@gmail.com

  • shilpa

    this tutorila is for the tag but i need to fetch the two tables data in one text box using autocomplete .how i have to do you done for the country names same way . it will also fetch the country name and country code but both should display the same box

  • shilpa

    https://www.zomato.com/ i want like this auto complete pleasse try to help me na i done single box autocomplete

  • shilpa

    please give some idea to do na

  • I will post tutorial today night shilpa.. 🙂

  • shilpa

    oh nice thank you let me try on that

  • shilpa

    i am wating for your post

  • Script sent to your mail. pls check

  • shilpa

    nice yar it work me great thank you so much

  • shilpa

    hey i done it.

  • Ikrom Shabri

    Hi I want to autocomplete with two input like country name and city name, I’ve tried and it’s not working at all. How can I pass two input to autocomplete php script ?

  • Hi, I have added new tutorial on jQuery autocomplete, i think that will mimic your exact requirement…Pls check…

    http://www.smarttutorials.net/two-fields-jquery-ui-autocomplete-using-jquery-php-mysql/

  • shilpa

    hey bro now i am trying the multiple auto complete using code Codeigniter but itsnot getting worked can any body give me an idea

  • shilpa

    refer muni multiple autocomplete

  • shilpa

    hi i want auto complete with code igniter with php and mysql

  • shilpa

    i racked my head sience from today and searched like anything i am not getting it can anybody

  • just make ajax call on autocomplete event and return json response from your server…Handle response the way I have handled..

  • shilpa

    ya i tryed it i am not getting it

  • shilpa

    Severity: Notice

    Message: Undefined index: search

    Filename: controllers/auto.php

    Line Number: 35

    i am getting this error when i start doing in the codeigniter can anybody guide wat i am doing wrong . please give me an idea

  • joaquin

    Hi, How can I added this functionality with textarea? like show me a word inside of a long text? can this be done with your code Muni?

  • Yes it can be done.. All need to do just attach auto complete event to your textarea

  • joaquin

    thank you that I already do.. I mean if I have in MYSQL a text like this: “In the jQuery autocomplete success method, I am getting the results and splits the country name and assign it to the label and value object. When user selects his desired result from the list of autocomplete result list, jQuery autocomplete select method is triggered. Where selected result is splited as well as assigned to the Country Number, Country Phone code and Country code textfields.”

    I need when I start typing per example “select” show me all the text where the word “select” is in the text … maybe if I have 100 rows and in 20 row there is the word “select” then show me those rows….

    right now just only show me if the start word is “select” but if is in the middle of the phrase not

    There is a possibility of show me that or I need to change something in your code??

    Best regards!

  • You need to change SQL query..

    Like this

    mysqli_query($con, “SELECT name, numcode, phonecode, iso3 FROM country where name LIKE ‘%”.strtoupper($_POST[‘name_startsWith’]).”%'”);

  • joaquin

    thank you that works!

  • freddy

    Hi Muni, let say i have data

    Nokia 123
    123 Samsung
    321 Smartphone

    when users type 123 how can i make auto complete working with show all data with 123, Thanks for answering Muni !

  • You need to change SQL query..

    Like this

    mysqli_query($con, “SELECT name, numcode, phonecode, iso3 FROM country where name LIKE ‘%”.strtoupper($_POST[‘name_startsWith’]).”%'”);

  • freddy

    Done, thanks for comment, how stupid am i ?

  • prince jain

    Dear Muni,

    Please send me the code to for

    jQuery Autocomplete Mutiple Fields Using jQuery, Ajax, PHP and MySQL . I have already subscribe but not get any email yet.

    to email id: princejain.acs@gmail.com

  • pls check your mail…

  • Umer Cheema

    Hi ,
    I have downloaded this but its not working on local machine ?

  • Hi,
    Pls check js & CSS files are added correctly.. I am sure it I will work.

  • Wladimir Jr

    Dear Muni,

    Please send me the code to for wladimirjr@gmail.com

  • Weibel György

    Hi muni! 🙂
    I need a special autocomplete and autofill script

    situation:
    I have 3 tables in db

    1> company id (int, autoincrement) ,company name
    2> company id(int, autoincrement),employee id, employee name, emloyee card id, employee department etc….
    3> company id(int, autoincrement), car license number, user id (employee id)

    html form:

    inputbox company name
    inputbox employye name
    inputbox emloyee card id
    inputbox employee department

    etc….

    goal:

    When i type into companyname autocomplet it
    next step i start type employee name autocomplete it but filter based on company name just show that employess name who belong selected company, when i select employee fill departmentment and emloyee card id textbox
    if I type to emloyee card id autocomplet it if i select one, fill company name data, and other employee data
    if i type to car license number autocomplete it, if i choose one fil company and employee data

    Is it possibe? please help me
    best regards

    György Weibel

  • Victor Olmedo

    Geat tutotial.

    I’ve a question, when I put a caracter to autoplemte, show all data, don’t filter according I fill the input.

    here my code:

    $(‘#txtRUC’).autocomplete({

    source: function( request, response ) {

    $.ajax({

    url : ‘./json/persona.json’,

    dataType: “json”,

    success: function( data ) {

    response( $.map( data.personas, function( item ) {

    return {

    value: item.ruc,

    data : item.nombre

    }

    }));

    }

    });

    },

    autoFocus: true,

    minLength: 1,

    select: function( event, ui ) {

    $(‘#txtRUC’).val(ui.item.value);

    $(‘#txtNOMBRE’).val(ui.item.data);

    }

    });

    here my json

    {

    “personas”:

    [

    {

    “ruc”: “3390238-0”,

    “nombre”: “Victor Olmedo”,

    “desc”: “Ventas ”

    }

    ,{

    “ruc”: “1234567-1”,

    “nombre”: “Oscar Insaurralde”,

    “desc”: “Farmacia ”

    }

    , {

    “ruc”: “234567-2”,

    “nombre”: “Willy Insaurralde”,

    “desc”: “Fletes ”

    }

    ]

    }

  • hi Muni,

    thanks to the tutorial, I already subscribing but look i still cannot download the source code, could you please sent me the source code at gali_arta@yahoo.com.

    Regards.

    Gali

  • Pei Yan

    Hi would it be possible for you to send me the jquery autocomplete script?
    l_peiyan@hotmail.com
    Thank you

  • bayu teguh pamuji

    explain to me, if data used json data

  • Great post. Thanks a lot.

  • Fernando Rizo Patrón

    hi Muni,

    thanks to the tutorial, I already subscribing but look i still cannot download the source code, could you please sent me the source code at frizopatron@gmail.com

    Regards.

    Fernando

  • sandeep sharma

    Sir, I Need also searching like shilpa plase send me also file sir. My mail id is sanfps@gmail.com

  • michael

    hi muni,

    please send me the download link. i already subscribed but no download file appear. mindmap.michaeljopia@gmail.com

  • fagbemi ayodele

    Hello Muni, Thanks for your codes. You’re really an inspiration to us upcoming programmers…..Pls, I’d tried to modify your codes to fit into my own style but it was not working for me…

    i tried to fetch datas from from an accounting database and populate just two values into the text box but it was not working.

    here is a sample of the html:

    Credit GL

    A/C No

    the jquery:

    $(‘#credit_1’).autocomplete({

    source: function( request, response ) {

    $.ajax({

    url : ‘../acct/search_user.php’,

    dataType: “json”,

    data: {

    name_startsWith: request.term,

    type: ‘customers_table’,

    row_num : 1

    },

    success: function( data ) {

    response( $.map( data, function( item ) {

    var code = item.split(“|”);

    return {

    label: code[0],

    value: code[0],

    data : item

    }

    }));

    }

    });

    },

    autoFocus: true,

    minLength: 0,

    select: function( event, ui ) {

    var names = ui.item.data.split(“|”);

    $(‘#account_1’).val(names[1]);

    }

    });

    lastly, the database query:

    Please, could you figure out what the problem might be the codes?

    Thank you.

  • Matsiko Bakunzi Vincent
  • Matsiko Bakunzi Vincent

    Hello,
    Please could you sen me source code for the above demo to matsikov@gmail.com

  • reshm

    how can we use ajax on radio buttons?
    suppose i have three radio buttons and want to show data to another fieldset in the same page by clicking on radio button and matching data from database

  • sandeep sharma

    Hello brother you are not reply my comment
    Why?

  • ajijulla sahib

    i can’t able to download the download link of this script

  • mosab

    please send me the code 🙂 mos3b.faqeeh@gmail.com

  • Manas

    Hi Plz send the complete code along with the JQuery and CSS to my id manaschakraborty18@gmail.com

  • madhuri

    hi

  • madhuri

    i want to display 2 autocomplete text box on is client name anothe is multiple address of single client. client name is autocomplete , if i select client name in one textbox(autocomplete) its releted address are autocomplete in another text box

  • madhuri

    i complete it but its not client specific all addresses in my table are display using codeignator

  • Alfredo

    Dear, I just joined but have not reached me script. Please send my email abaezc@gmail.com

  • Alfredo

    Dear, I just joined but have not reached me script. Please send my email abaezc@gmail.com

  • Sivarajan

    aesivarajanmca@outlook.com please send the

    jQuery Autocomplete Mutiple Fields Using jQuery, Ajax, PHP and MySQL source code

  • Joselito Marcelo

    hi.. can i have this script.. i want this autocomplete multiple fields.. i need it to my system.. thank you in advance..

  • Joselito Marcelo

    Dear Admin,
    kindly send me the code for this demo..
    http://www.smarttutorials.net/

    send to my email Blindz167@gmail.com

    .. Thank you in advance..

  • Mirko Casamento

    Can u send me the script? mirko.casamento@gmail.com

  • Mirko Casamento

    can u give me a copy? mirkocasa.stream@gmail.com

  • Ecchitori

    I have this problem pertaining to your script. It doesn’t seem to be working at my end. I need an answer as soon as possible. Thanks

    http://stackoverflow.com/questions/39526307/autocomplete-two-fields-nothing-happening

  • Manish Dandhare

    hello admin, kindly send me the code for this demo. my email id isoftware117@gmail.com

  • Bastepes

    Thank you very much for your tutorial,Your work is very good,
    please explain how to insert into the database and explain the request insertion of the textfield?

  • Sumit Ghosh

    can u share full code in my mail id – ghoshs513@gmail.com
    it’s very urgent… pls muni

  • Putu Mega Putra

    Hi Muni. I can’t run this in my localhost. But when I upload the script, it works. However, why is the speed between your demo and my demo is so much different? Your demo could load the suggestion very quickly, but mine takes longer time to load the suggestion. is this related to the hosting? What is your hosting? Thanks

  • How to filter multiple brand at a time?

  • Zain Ahmed

    hi muni
    thanks for this tutorial i have face one problem please help me ,after get data in textbox when i click button for insert textbox value it gives an error Undefined index: countryname[]

  • Jincy George

    hi can u plz snd me the code for above demo

  • Yohanes Faith

    Hello, Please send the script to me. yohanes_4ever@yahoo.com
    Thanks before

  • Shubham Aggarwal

    hey, plz send me the full script for the same! i’ve already subscribed.. email: shubhama9495@gmail.com

  • Shubham Aggarwal

    hey, if u got the code, can u plz send to me at shubhama9495@gmail.com

  • Chris S

    For anyone having trouble getting this to work like I was, it’s because the method was left out of the ajax request. Under dataType: “json”, you need to insert method: ‘post’, as seen in the attached image. The author (muni) also posted the correct code here:

    http://stackoverflow.com/questions/39526307/autocomplete-two-fields-nothing-happening

    https://uploads.disquscdn.com/images/d45ed1d74bcc14a3c6301b74d3acdbc92e053ec0dd0eff1c4eabf63af77b3424.png

  • Durga Prasanna

    hi ,

    I have trouble making “jQuery autocomplete multiple fields with single auto-select Request” work.
    Could you please send me the script @ durgalanki@gmail.com

  • Langat Lenny

    Thanks Chris, you have safe me a lot.

  • Sharad Gupta

    hello shilpa can u send me the invoice code bcz i am suffering from a problem with dropdown autocomplete for 2nd field when i click to add textfield ,plz send me at sharadg331@gmail.com .its very
    urgent

  • shane753

    Dear Admin, Please send me the code for jquery autocomplete multiple fields using ajax php mysql example
    email: shane753@gmail.com

  • Sengkuni

    Hello muni,

    Can you help with tutorial about siimiliar to W3School (https://www.w3schools.com/php/php_ajax_database.asp), but using checkbox as input not using dropdown to get value in database. Thank you

Get Instant Script Download Access!