Làm cách nào để tìm kiếm jQuery trực tiếp của tôi chờ một giây trước khi thực hiện tìm kiếm?

Question

Tôi có một đầu vào tìm kiếm gửi dữ liệu từ đầu vào đến tệp php khi tôi nhập. Tệp php thực hiện tìm kiếm trên cơ sở dữ liệu của tôi và hiển thị danh sách các tùy chọn tìm kiếm. Bạn biết đấy, phong cách ajax đang tìm kiếm trực tiếp.

Vấn đề của tôi là, nếu bạn gõ một cái gì đó thực sự nhanh chóng, nó chỉ có thể thực hiện tìm kiếm tắt của 1 hoặc 2 chữ cái đầu tiên mặc dù một 10 đã được gõ. Điều này gây ra một vài vấn đề.

jQuery My trông hơi như thế này:

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

và

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 

Vì vậy, tôi chỉ tò mò, làm thế nào tôi có thể làm cho nó để kịch bản của tôi chờ đợi cho đến khi tôi đã hoàn thành đánh máy trước khi chạy chức năng? Logic của tôi nói một cái gì đó giống như nếu một phím đã không được ép trong 200 giây vi mô, hãy chạy hàm, nếu không sẽ giữ một chút.

Điều này được thực hiện như thế nào?

Answer 1

Dễ dàng, sử dụng setTimeout. Tất nhiên bạn chỉ muốn một bộ đếm thời gian đi cùng một lúc, vì vậy điều quan trọng là phải sử dụng clearTimeout vào đầu của hàm ...

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

Answer 2

1 giải pháp trong psuedocode:

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

Answer 3

Bạn thực sự nên xem xét sử dụng các plugin jQuery autocomplete. Tôi thấy plugin này rất hữu ích và nó đã làm những gì bạn cần. Nhìn đặc biệt ở độ trễ option, bạn có thể tùy chỉnh để thay đổi thời lượng plugin chờ sau khi nhấn phím để chạy.

Answer 4

tôi đã tìm thấy sự thành công tốt nhất khi gắn các sự kiện để bấm phím, KeyDown và KeyUp đầu vào. Safari/FireFox/IE tất cả dường như để xử lý các phím bấm đặc biệt (xóa, backspace, vv) một chút khác nhau nhưng sử dụng tất cả các sự kiện với nhau dường như để trang trải nó. Cách duy nhất chạy tất cả các sự kiện hoạt động mặc dù là sử dụng setTimeout để khi tất cả chúng cháy, nó chỉ reset lại timer và cuối cùng callback chỉ được thực hiện một lần.

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

Answer 5

này là hạnh phúc

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

Answer 6

Bạn có thể quan tâm đến tôi bindDelayed jQuery mini-plugin. Nó:

• Cho phép bạn chỉ định một sự chậm trễ trước khi đá ra khỏi yêu cầu
• Tự động hủy bỏ bất kỳ yêu cầu trước đó đã được lên kế hoạch để đi tắt
• Tự động hủy bỏ bất kỳ yêu cầu trong không khí XHR rằng đã tiến hành khi bạn thực hiện yêu cầu của bạn
• Chỉ gọi callback của bạn cho các yêu cầu mới nhất
  • Nếu sử dụng các loại "s", đợi đủ lâu để yêu cầu đi ra ngoài, và sau đó loại "a", và câu trả lời cho "s "trở lại là fore các phản ứng cho "sa" bạn sẽ không phải đối phó với nó.

Câu trả lời cho câu hỏi ban đầu sử dụng bindDelayed sẽ trông giống như vậy:

// 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'); 

Trong trường hợp trang web của tôi là xuống, đây là đoạn code plugin cho Stack Overflow hậu thế:

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