jQuery 자동 완성 : 사용자 입력에 문자가 없습니다.

Question

"city"입력 필드에서 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" 

버그를 복제하는 데 성공하지 못했지만 우연히 만날 수는 없습니다. 세 번째 문자에서 오류가 발생합니다. 삽입하는 동안 자바 스크립트 처리 은과 키보드 버퍼가 충돌합니다.

그래서, 나는 생각하지만, 나는 사람들이 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() 메소드 외부 일단의 getLocation 외부 $의 city.result 방법을 넣어
• 저장합니다 $ ('# 도시') 객체를 자동 완성 를 초기화 여기

방법은 결과 코드 : 요하는 문제가 같은

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 
     } 
    });