jquery autocomplete multiple fields with single auto-select request

Today, We want to share with you jquery autocomplete multiple fields with single auto-select request.In this post we will show you jquery autocomplete populate multiple fields, hear for Dynamic Autocomplete Options with AJAX, Javascript, JQuery and PHP 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.

how to autocomplete data on multiple fields with jquery and ajax?

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

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

Step 3:
Write your jQuery Autocomplete Script:

$(document).on('focus','.autocomplete_txt', handleAutocomplete);

function getId(element){
    var id, idArr;
    id = element.attr('id');
    idArr = id.split("_");
    return idArr[idArr.length - 1];
}
    
function getFieldNo(type){
    var yourLpNumber;
    switch (type) {
        case 'countryname':
            yourLpNumber = 0;
            break;
        case 'countryno':
            yourLpNumber = 1;
            break;
        case 'phone_code':
            yourLpNumber = 2;
            break;
        case 'country_code':
            yourLpNumber = 3;
            break;
        default:
            break;
    }
    return yourLpNumber;
}

function handleAutocomplete() {
    var type, yourLpNumber, currentEle; 
    type = $(this).data('type');
    yourLpNumber = getFieldNo(type);
    currentEle = $(this);

    if(typeof yourLpNumber === 'undefined') {
        return false;
    }

    $(this).autocomplete({
        source: function( data, cb ) {	 
            $.ajax({
                url:'ajax.php',
                method: 'GET',
                dataType: 'json',
                data: {
                    name:  data.term,
                    yourLpNumber: yourLpNumber
                },
                success: function(res){
                    var output;
                    output = [
                        {
                            label: 'There is matching record found for '+data.term,
                            value: ''
                        }
                    ];

                    if (res.length) {
                        output = $.map(res, function(obj){
                            var arr = obj.split("|");
                            return {
                                label: arr[yourLpNumber],
                                value: arr[yourLpNumber],
                                data : obj
                            };
                        });
                    }
                    cb(output);
                }
            });
        },
        autoFocus: true,	      	
        minLength: 1,
        select: function( event, ui ) {
            var resArr, dbrwnumber;
            
            
            dbrwnumber = getId(currentEle);
            resArr = ui.item.data.split("|");	
            
        
            $('#countryname_'+dbrwnumber).val(resArr[0]);
            $('#countryno_'+dbrwnumber).val(resArr[1]);
            $('#phone_code_'+dbrwnumber).val(resArr[2]);
            $('#country_code_'+dbrwnumber).val(resArr[3]);
        }		      	
    });
}

Step 4:
jQuery Autocomplete PHP Script:

I hope you get an idea about jquery autocomplete multiple values ajax.

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 Best 2 Example
Create Add/Remove Multiple Dynamically Input Fields in Javascript or Jquery