검색을 수행하기 전에 라이브 jQuery 검색을 잠시 기다리려면 어떻게 해야 합니까?

검색을 수행하기 전에 라이브 jQuery 검색을 잠시 기다리려면 어떻게 해야 합니까?

제가 입력할 때 입력한 데이터를 php 파일로 보내는 검색 입력이 있습니다.php 파일은 내 데이터베이스에서 검색을 수행하고 검색 옵션 목록을 표시합니다.아약스 스타일의 라이브 검색.

제 문제는, 만약 당신이 무언가를 정말 빨리 입력한다면, 다른 10개가 입력되었음에도 불구하고 처음 1~2개의 글자만 검색할 수 있다는 것입니다.이로 인해 몇 가지 문제가 발생합니다.

내 jQuery는 다음과 같습니다.

$(document).ready(function(){
  $('#searchMe').keyup(function(){
    lookup(this.value);
  });
});

그리고.

function lookup(searchinput) {

  if(searchinput.length == 0) {
    // Hide the suggestion box.
    $("#suggestions").hide();
  } else {

    $('#loading').fadeIn();

    $.post("/RPCsearch.php", {queryString: ""+searchinput+""}, function(data){
      if(data.length > 0) {
        $("#suggestions").html(data).show();
        $('#loading').fadeOut();
      }
    });
  }
} // lookup

그래서 궁금한 것이 있는데, 어떻게 하면 제 스크립트가 기능을 실행하기 전에 제가 타자를 마칠 때까지 기다리도록 만들 수 있을까요?제 논리에 따르면 키를 200마이크로초 동안 누르지 않은 경우, 기능을 실행하거나, 그렇지 않으면 조금만 기다려 주십시오.

어떻게 하는 거지?

사용하기 쉽습니다. 물론 한 번에 하나의 타이머만 작동하기를 원하기 때문에 기능 시작 시에 사용하는 것이 중요합니다.

$(function() {
  var timer;
  $("#searchMe").keyup(function() {
    clearTimeout(timer);
    var ms = 200; // milliseconds
    var val = this.value;
    timer = setTimeout(function() {
      lookup(val);
    }, ms);
  });
});

당신은 내 jQuery 미니 플러그인에 관심이 있을 것입니다.내용:

• 요청을 시작하기 전에 지연을 지정할 수 있습니다.
• 종료하도록 예약된 이전 요청을 자동으로 취소합니다.
• 요청을 할 때 진행 중이던 모든 무선 XHR 요청을 자동으로 취소합니다.
• 최신 요청에 대한 콜백만 호출
  • 사용자가 "s"를 입력하면 요청이 나갈 때까지 충분히 기다린 다음 "a"를 입력하면 "s"에 대한 응답이 "sa"에 대한 응답보다 먼저 반환됩니다.

원래 질문에 대한 답은 다음과 같습니다.bindDelayed다음과 같이 표시됩니다.

// Wait 200ms before sending a request,
// avoiding, cancelling, or ignoring previous requests
$('#searchMe').bindDelayed('keyup',200,'/RPCsearch.php',function(){
  // Construct the data to send with the search each time
  return {queryString:this.value};
},function(html){
  // Use the response, secure in the knowledge that this is the right response
  $("#suggestions").html(html).show();
},'html','post');

내 사이트가 다운된 경우, 스택 오버플로 후세를 위한 플러그인 코드는 다음과 같습니다.

(function($){
  // Instructions: http://phrogz.net/jquery-bind-delayed-get
  // Copyright:    Gavin Kistner, !@phrogz.net
  // License:      http://phrogz.net/js/_ReuseLicense.txt
  $.fn.bindDelayed = function(event,delay,url,dataCallback,callback,dataType,action){
    var xhr, timer, ct=0;
    return this.on(event,function(){
      clearTimeout(timer);
      if (xhr) xhr.abort();
      timer = setTimeout(function(){
        var id = ++ct;
        xhr = $.ajax({
          type:action||'get',
          url:url,
          data:dataCallback && dataCallback(),
          dataType:dataType||'json',
          success:function(data){
            xhr = null;
            if (id==ct) callback.call(this,data);
          }
        });
      },delay);
    });
  };
})(jQuery);

당신은 정말로 jQuery 자동 완성 플러그인을 사용해야 합니다.이 플러그인은 매우 유용하며 이미 필요한 기능을 수행합니다.특히 지연 옵션을 살펴보십시오. 이 옵션은 키 입력 후 플러그인이 실행될 때까지 기다리는 시간을 변경하도록 사용자 지정할 수 있습니다.

psuedocode의 1개 솔루션:

OnKeyPress()
    txt = getTxt
    sleep(200)
    newTxt = getTxt
    if (txt == newTxt)  // nothing has been typed so do something
       run my thing

이것은 행복합니다.

 $(document).ready(function(){

   $("#searchMe").keyup(function () {

  try{window.clearTimeout(timeoutID);}catch(e){}
  timeoutID = window.setTimeout(run, 2000); //delay

  function run()
  {      //dowhatev
    var text = $("#searchMe").val();
    //$("#showit").html(text);       
  }     
 });   
});

키 누름, 키다운, 키업 입력에 이벤트를 첨부했을 때 최고의 성공을 거두었습니다.Safari/FireFox/IE는 모두 특수 키 누르기(삭제, 백스페이스 등)를 처리하는 것처럼 보이지만 모든 이벤트를 함께 사용하면 처리할 수 있는 것 같습니다.그러나 모든 이벤트를 실행하는 유일한 방법은 setTimeout을 사용하여 모든 이벤트가 실행될 때 타이머만 재설정하고 결국 콜백은 한 번만 실행되도록 하는 것입니다.

var delay = 200;
var search_timer = null;
$("#searchMe").keydown(function(e) {
    if(search_timer) {
        clearTimeout(search_timer);
    }
    search_timer = setTimeout(lookup, delay);
});
$("#searchMe").keypress(function(e) {
    if(search_timer) {
        clearTimeout(search_timer);
    }
    search_timer = setTimeout(lookup, delay);
});
$("#searchMe").keyup(function(e) {
    if(search_timer) {
        clearTimeout(search_timer);
    }
    search_timer = setTimeout(lookup, delay);
});

언급URL : https://stackoverflow.com/questions/1171582/how-do-i-make-my-live-jquery-search-wait-a-second-before-performing-the-search