Jquery ajax search debounce

Question

사용자가 입력 한 결과에 따라 결과를 반환하는 웹 사이트에 대한 실시간 검색을 구축하고 있습니다. 사용자가 타이핑을 마쳤을 때만 요청을 보냅니다.

저는 타이머를 사용하여 몇 가지 구현을 시도했고 심지어 underscore.js에서 debounce 메소드를 시도했지만 항상 비슷한 결과를 얻고있는 것처럼 보입니다.

입력하는 동안 타이핑이 끝날 때까지 요청이 지연됩니다. 그러나 대기열에있는 것처럼 모든 입력을 시작하는 것으로 보입니다. 예를 들어 '자전거'를 입력하면 결과는 다음과 같이 나타납니다.

b 

bi 

bik 

bikes 

이와 같이 검색 결과 스트림이 표시됩니다.

이 내 현재의 구현이 사용하고 밑줄 JS

$('#search_term').on('keyup', _.debounce(function (e) { 

     $.ajax({ 
      type: "GET", 
      url: "quicksearch.php", 
      data: { search_term:$('#search_term').val()}, 
      success: function(msg){ 
       $('#quick_search_results').html(msg).slideDown(); 
      } 
    }); 

}, 100)); 

누구나 어떤 아이디어가?

Answer 1

아마도 사용자는 충분히 빨리 입력 할 수 없습니다. 귀하의 예제에서이 100ms 이하 여야하는 _.debounce 함수의 wait 매개 변수를 설정 : (사양을 참조하십시오. _.debounce(function, wait, [immediate])

$('#search_term').on('keyup', _.debounce(function (e) { 
    $.ajax({ 
     type: "GET", 
     url: "quicksearch.php", 
     data: { search_term:$('#search_term').val()}, 
     success: function(msg){$('#quick_search_results').html(msg).slideDown();} 
    }); 
}, 300)); // < try 300 rather than 100