jquery autocomplete multiple fields with single auto-select request

Rate this post

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:

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

Free Live Chat for Any Issue

<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:

Read Also:  add active class to li onclick jquery

$(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:

<?php
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
require_once 'config.php';

$yourLpNumber = !empty($_GET['yourLpNumber']) ? $_GET['yourLpNumber'] : '';
$name = !empty($_GET['name']) ? strtolower(trim($_GET['name'])) : '';

$fieldName = 'name';

switch ($yourLpNumber) {
    case 1:
        $fieldName = 'numcode';
        break;
    case 2:
        $fieldName = 'telcodenm';
        break;
    case 3:
        $fieldName = 'iso3';
        break;
}

$data = array();
if (!empty($_GET['name'])) {
    $name = strtolower(trim($_GET['name']));
    $sql = "SELECT name, numcode, telcodenm, iso3 FROM country where LOWER($fieldName) LIKE '" . $name . "%'";
    $output = mysqli_query($conn, $sql);
    while ($row = mysqli_fetch_assoc($output)) {
        $name = $row['name'] . '|' . $row['numcode'] . '|' . $row['telcodenm'] . '|' . $row['iso3'];
        array_push($data, $name);
    }
}
echo json_encode($data);exit;

Download

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.