मैं अपनी लाइव jQuery खोज को खोज करने से पहले एक सेकंड इंतजार कैसे करूं?

Question

मुझे एक खोज इनपुट मिला है जो एक इनपुट से डेटा को php फ़ाइल में भेजता है जैसा कि मैं टाइप करता हूं। PHP फ़ाइल मेरे डेटाबेस पर एक खोज करता है और खोज विकल्पों की एक सूची दिखाता है। आप जानते हैं, AJAX शैली लाइव खोज।

मेरी समस्या यह है कि, यदि आप वास्तव में कुछ तेज़ी से टाइप करते हैं, तो यह केवल पहले 1 या 2 अक्षरों की खोज कर सकता है, भले ही 10 अन्य टाइप किए गए हों। इससे कुछ समस्याएं होती हैं।

मेरे 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 माइक्रो सेकंड के लिए एक कुंजी दबाया नहीं गया है, फ़ंक्शन चलाएं, अन्यथा थोड़ा सा पकड़ लें।

यह कैसे किया जाता है? psuedocode में

Answer 1

आसान, setTimeout का उपयोग करना आसान है। बेशक आप केवल एक टाइमर एक ही बार में जा रहा चाहते हैं, तो यह समारोह की शुरुआत में clearTimeout उपयोग करने के लिए महत्वपूर्ण है ...

$(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 समाधान:

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

Answer 3

आप वास्तव में चाहिए jQuery autocomplete प्लगइन का उपयोग कर को देखने के लिए। मुझे यह प्लगइन बहुत उपयोगी लगता है और यह पहले से ही आपको चाहिए जो आपको चाहिए। विशेष रूप से देरी option पर देखें, जिसे आप बदलने के लिए कस्टमाइज़ कर सकते हैं कि प्लगइन कितने समय तक चलने के बाद कीस्ट्रोक की प्रतीक्षा करता है।

Answer 4

मैं सबसे अच्छा सफलता जब कुंजी दबाने के लिए घटना संलग्न पाया है, keydown, और KeyUp आदानों। सफारी/फ़ायरफ़ॉक्स/आईई सभी विशेष कुंजीपेशियों (हटाएं, बैकस्पेस इत्यादि) को थोड़ा अलग तरीके से संभालने लगते हैं लेकिन सभी घटनाओं का उपयोग करके इसे कवर करना प्रतीत होता है। सभी घटनाओं को चलाने का एकमात्र तरीका यह है कि सेटटाइमआउट का उपयोग करना है ताकि जब वे सभी इसे आग लग जाए तो टाइमर रीसेट हो जाता है और आखिरकार कॉलबैक केवल एक बार निष्पादित हो जाता है।

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

यह एक खुश

$(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

आप रुचि हो सकती है मेरी bindDelayed jQuery मिनी प्लगइन में है। यह:

• आप अनुरोध
• स्वचालित रूप से किसी भी पिछले अनुरोध करता है कि बंद होने के लिए
• स्वचालित रूप से किसी में हवा एक्सएचआर अनुरोध करता है कि प्रगति के लिए जब आप में थे रद्द निर्धारित किया गया रद्द बंद लात से पहले एक देरी निर्दिष्ट करने देती है आपके अनुरोध बनाने
• केवल नवीनतम अनुरोध
  • के लिए अपने कॉलबैक का आह्वान उपयोगकर्ता प्रकार "एस", प्रकार "एक", और "s के लिए प्रतिक्रिया इंतजार कर रहा है काफी देर तक तो अनुरोध बाहर जाने के लिए के लिए, और उसके बाद "वापस आ गया है "sa" के लिए प्रतिक्रिया से पहले आपको इसका सामना नहीं करना पड़ेगा।

मूल प्रश्न bindDelayed उपयोग करने के लिए इस सवाल का जवाब तो ऐसा दिखाई देगा:

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

:

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

मामले में मेरी साइट नीचे है, यहाँ स्टैक ओवरफ़्लो भावी पीढ़ी के लिए प्लगइन कोड है