Autocomplete - user typing too fast - select typed input

Question

I have the following code for multiple autocomplete of various fields. All works fine, but the problem is that my useres type too fast and ajax do not have time to load all results. Therefore, when somebody types the whole word (which is in the suggested list, but does not appear yet - is too slow), I need to use this word so that it behaves like the used clicked at this word in the list.

The answer might be this -> How do you trigger autocomplete "select" event manually in jQueryUI? , but I have no idea how it works with filling multiple fields. Do I need to do the mysql query again after onchange? Can anybody help please? I am rather a beginner so please sorry my not-knowing. I would possibly need a guidance step by step.

If I need this - where do I put it in my code?

$(this).data('ui-autocomplete')._trigger('select', 'autocompleteselect', {item:{value:$(this).val()}});

My code is like this:

$(".addmore").on('click',function(){
count=$('table tr:visible').length; 
var data="<tr><td><div class='form-control rohy'><i class='fa fa-trash-o    vymazat' id='"+i+"'    onclick='reply_click(this.id);calculatecelkovoucenu();removeRow(this)' value='delete_"+i+"' data-val='"+i+"' style='font-size: 18px;color: #e70000;cursor: pointer;'></i><div></td><td><div class='form-control rohy'><span id='snum"+i+"'>"+count+".</span><div></td>";
data +="<td style='padding-right: 10px;'><input class='form-control rohy' type='text' id='produktyname_"+i+"' name='produktyname_"+i+"' placeholder='Kod zbozi' ></td> <td style='padding-right: 10px;'><input class='form-control rohy' type='text' id='produkty_no_"+i+"' name='produkty_no_"+i+"' placeholder='Popis zbozi' ></td><td style='padding-right: 10px;'><input class='form-control rohy' type='text' id='phone_code_"+i+"' name='phone_code_"+i+"' placeholder='Cena za 1 ks' oninput='calculate"+i+"();calculatecelkovoucenu();'></td><td style='padding-right: 10px;'><input class='form-control rohy' type='text' id='produktypocet_"+i+"' name='produktypocet_"+i+"' placeholder='Ks' oninput='calculate"+i+"();calculatecelkovoucenu();'></td><td><input class='form-control rohy' type='text' id='celkovacena_"+i+"' name='celkovacena_"+i+"' placeholder='Celkova cena' onchange='calculate"+i+"();calculatecelkovoucenu();' readonly></td></tr>";
$('table').append(data);
row = i ;
$('#produktyname_'+i).autocomplete({
source: function( request, response ) {
    $.ajax({
        url : 'getprodukty.php',
        dataType: "json",
        method: 'post',
    delay: 0,
        data: {
           name_startsWith: request.term,
           type: 'produkty_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: 3,
select: function( event, ui ) {
    var names = ui.item.data.split("|");
    id_arr = $(this).attr('id');
    id = id_arr.split("_");                 
    $('#produkty_no_'+id[1]).val(names[1]);
    $('#phone_code_'+id[1]).val(names[2]);
    $('#produkty_code_'+id[1]).val(names[3]);
}               
 });        


$('#produkty_code_'+i).autocomplete({
source: function( request, response ) {
    $.ajax({
        url : 'getprodukty.php',
        dataType: "json",
        method: 'post',
    delay: 0,
        data: {
           name_startsWith: request.term,
           type: 'produkty_table',
           row_num : row
        },
         success: function( data ) {
             response( $.map( data, function( item ) {
                var code = item.split("|");
                return {
                    label: code[3],
                    value: code[3],
                    data : item
                }
            }));
        }
    });
},
autoFocus: true,            
minLength: 3,
select: function( event, ui ) {
    var names = ui.item.data.split("|");
    id_arr = $(this).attr('id');
    id = id_arr.split("_");         
    $('#produkty_no_'+id[1]).val(names[1]);
    $('#phone_code_'+id[1]).val(names[2]);
    $('#produktyname_'+id[1]).val(names[0]);
}               
  });
$('#phone_code_'+i).autocomplete({
source: function( request, response ) {
    $.ajax({
        url : 'getprodukty.php',
        dataType: "json",
        method: 'post',
    delay: 0,
        data: {
           name_startsWith: request.term,
           type: 'produkty_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: 3,
select: function( event, ui ) {
    var names = ui.item.data.split("|");
    id_arr = $(this).attr('id');
    id = id_arr.split("_");                     
    $('#produkty_no_'+id[1]).val(names[1]);
    $('#produkty_code_'+id[1]).val(names[3]);
    $('#produktyname_'+id[1]).val(names[0]);
}               
 });
 $('#produkty_no_'+i).autocomplete({
source: function( request, response ) {
    $.ajax({
        url : 'getprodukty.php',
        dataType: "json",
        method: 'post',
    delay: 0,
        data: {
           name_startsWith: request.term,
           type: 'produkty_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: 3,
select: function( event, ui ) {
    var names = ui.item.data.split("|");
    id_arr = $(this).attr('id');
    id = id_arr.split("_");                     
    $('#produkty_code_'+id[1]).val(names[3]);
    $('#phone_code_'+id[1]).val(names[2]);
    $('#produktyname_'+id[1]).val(names[0]);
}               
 });

i++;
}); 

getprodukty.php is as follows:

if($_POST['type'] == 'produkty_table'){
$row_num = $_POST['row_num'];
$name = $_POST['name_startsWith']; 
$query = "SELECT kod,cena,popis FROM produkty where kod LIKE '".$name."%' ORDER by kod ASC LIMIT 5"; 
$result = mysqli_query($spojeni, $query);    
$data = array();
while ($row = mysqli_fetch_assoc($result)) { 
    $name = $row['kod'].'|'.$row['popis'].'|'.$row['cena'].'|'.$row_num;
    array_push($data, $name);   
}   
echo json_encode($data);
}   

Thank you!

Answer 1

This is how I would handle it:

• Store partial field value used for auto-complete
• Perform ajax request
• Check current value with stored value, if same proceed, if different abort (presumably the new addition has triggered a further ajax request with the newer value).