Javascript jQuery自动完成：用户输入中缺少字符

我正在“城市”输入字段上调试jQuery自动完成实例（v1.1）

仅当字段值长度至少为2且值已更改时，才会在字段的

keyup

事件上设置自动完成数据绑定

数据绑定、提示列表和自动完成工作正常。 但有点不对劲。在日志中，我看到很多时候，发布到服务器的城市输入值中缺少第3个字符，有时甚至第4个字符。一些例子：

"trpani" instead of "trapani"
"fienze" instead of "firenze"
"scndicci" instead of "scandicci"
"brdisi" instead of "brindisi"
"paermo" instead of "palermo"
"caliari" instead of "cagliari"

我没有成功地复制这个bug，但我确信这不是偶然的！错误发生在第三个字符处。在插入过程中，Javascript处理似乎与键盘缓冲区冲突

因此，我猜，但我不确定，人们键入

f I r e n z e

，但最终缺少

r

字符，输入的最终值是

fienze

，最终发布到服务器

问题

发生了什么事？为什么我没有成功地复制错误？怎么了

以下是用于设置自动完成的代码：

/*
 * here I store the previous value
 */
var storeCity;
$('#City').keydown(function(){
    var val = $(this).val();
    storeCity = (val.length >=2 ? val.substring(0,2):"");
});

/*
 * the autocomplete is set only if
 * - the City value has changed compared to the storeCity value
 * - the City value has lenght at least 2
 * - remark: using the keypress does not solve the issue
 */
$('#City').keyup(function(){
    var val = $(this).val();
    if(val.length>=2 && val.substring(0,2)!=storeCity){
        getLocations('#City');
    }
});

function getLocations(cityId){
    var hint = $(cityId).val().substring(0,2);

    $.ajax({
        type: "GET",
        url: "/include/getLocations.asp",
        data: ({location : hint}),
        async: false,
        error: function() {},
        success: function(dataget) {
            var result = dataget.split("\n");

            $(cityId).flushCache();
            $(cityId).autocomplete(result, {
                pleft: 100px,
                minChars: 2,
                matchContains: true,
                max: 3000,
                delay: 100,
                formatItem: function(row){...},
                formatMatch: function(row){ return row[0]; },
                formatResult: function(row){ return row[0]; }
            });

            $(cityId).result(function(event,data){...});
        }
    });
}

---

看起来初始化的顺序应该相反。加载页面时，自动完成组件的初始化只应发生一次。见所附示例：

  $( "#city" ).autocomplete({
        source: function( request, response ) {
           // Put your ajax request here
        }
  });

---

最后我用一些启发法解决了这个问题。我认为问题是由于事件冲突造成的。所以我试着获得更好的表现

• 在getLocation（）方法之外初始化自动完成一次
• 将$（'#city'）对象存储在变量中
• 将$city.result方法置于getLocation（）方法之外

以下是结果代码：

var $city = $('#City');
var storeCity;

$city.keypress(function(){
    var val = $(this).val();
    storeCity = (val.length >=2 ? val.substring(0,2):"");
});

/*
 * the autocomplete is set only if
 * - the City value has changed compared to the storeCity value
 * - the City value has lenght at least 2
 * - remark: using the keypress does not solve the issue
 */
$city.keyup(function(){
    var val = $(this).val();
    if(val.length>=2 && val.substring(0,2)!=storeCity){
        getLocations('#' + $city[0].id);
    }
});

$city.autocomplete({
    pleft: 100px,
    minChars: 2,
    matchContains: true,
    max: 3000,
    delay: 50
});

$city.result(function(event,data){...});

function getLocations(cityId){
    var hint = $(cityId).val().substring(0,2);

    $.ajax({
        type: "GET",
        url: "/include/getLocations.asp",
        data: ({location : hint}),
        async: false,
        error: function() {...},
        success: function(dataget) {
            var result = dataget.split("\n");

            $(cityId).flushCache();
            $(cityId).autocomplete(result, {
                formatItem: function(row){...},
                formatMatch: function(row){ return row[0]; },
                formatResult: function(row){ return row[0]; }
            });
        }
    });
}

---

逻辑实现中似乎存在问题，因为在第一次调用getLocations（）时，storeCity始终等于空字符串。因为您在keydown回调函数上设置了它。尝试改用keypress，它总是在keypup之前调用。不，我已经测试过了，但是问题没有解决。您没有正确使用autocomplete小部件。您应该将其应用于

输入

。如果您实际获得输入文本的

子字符串（0，2）

，那么发送到服务器的值怎么可能是整个单词（“trapani”，等等）。2个长度字符串被发送到服务器，其中查询使用like子句运行。这个问题与用户输入有关。正如我所说，数据绑定和自动完成工作正常。不，整个城市列表太大，无法在页面加载时加载一次。因此，每当$（cityId）.val（）子字符串（0,2）发生更改时，我都会刷新并重新加载本地数据。