jQuery自動完成：用戶輸入中缺少字符

Question

我正在調試「城市」輸入字段上的jQuery自動完成實例（v1.1）。

僅當字段值長度至少爲2且僅當值已更改時，纔會在字段的keyup事件上設置自動完成數據綁定。

數據綁定，提示列表和自動完成工作正常。 但有些事情是錯的。在日誌中，我發現很多次在發佈到服務器的城市輸入值中缺少第三個甚至第四個字符。一些示例：

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

我沒有成功複製該錯誤，但我確信它不會是偶然的！錯誤發生在第三個字符處。看來在插入過程中，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){...}); 
     } 
    }); 
} 

Answer 1

最終我解決了一些啓發式。我認爲問題是由於事件衝突。所以我試圖獲得更好的表現。

• 初始化自動完成一次的的getLocation（）方法外
• 店$（'＃城市）對象在一個變量
• 把$ 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]; } 
      }); 
     } 
    }); 
} 

Answer 2

它看起來像初始化的順序應該顛倒。當頁面加載時，自動完成組件的初始化應該只發生一次。見附例：

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