自动填充 - 用户输入过快 - 选择键入的输入

时间:2015-12-02 20:49:26

标签: javascript php jquery ajax autocomplete

我有以下代码用于各种字段的多个自动完成。一切正常,但问题是我的useres类型太快,ajax没有时间加载所有结果。因此,当有人输入整个单词(在建议列表中,但尚未显示 - 太慢)时,我需要使用这个单词,使其行为类似于单击列表中此单词的用法。

答案可能就是这个 - > How do you trigger autocomplete "select" event manually in jQueryUI?,但我不知道如何填充多个字段。在onchange之后我是否需要再次执行mysql查询?有人可以帮忙吗?我是一个初学者,所以请对不起我不知道。我可能需要一步一步的指导。

如果我需要这个 - 我在哪里把它放在我的代码中?

ab<-data.frame(a=1:3,b=3:5)
`ab$a` <- letters[1:3]
get("ab$a")
# [1] "a" "b" "c"

我的代码是这样的:

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

getprodukty.php如下:

$(".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++;
}); 

谢谢!

1 个答案:

答案 0 :(得分:0)

我将如何处理它:

  • 存储用于自动完成的部分字段值
  • 执行ajax请求
  • 使用存储值检查当前值,如果相同则继续,如果不同的中止(可能是新添加已触发另一个具有较新值的ajax请求)。
相关问题