ajax लाने के लिए कैसे jQuery

Question

साथ onkeyup खोज

मेरी स्क्रिप्ट ajax कॉल करने के लिए

<script language="javascript"> 
function search_func(value) 
{ 
    $.ajax({ 
     type: "GET", 
     url: "sample.php", 
     data: {'search_keyword' : value}, 
     dataType: "text", 
     success: function(msg){ 
        //Receiving the result of search here 
     } 
    }); 
} 
</script> 

एचटीएमएल

<input type="text" name="sample_search" id="sample_search" onkeyup="search_func(this.value);"> 

प्रश्न: जबकि onkeyup मैं ajax का उपयोग कर रहा लाने के लिए परिणाम। एक बार AJAX परिणाम देरी बढ़ जाती है समस्या मेरे लिए होती है।

उदाहरण के लिए एक ओर जहां t कीवर्ड टाइपिंग मैं ajax परिणाम प्राप्त हो जाएगा और मैं ajax परिणाम प्राप्त जबकि te टाइपिंग जब दो KeyUp के बीच ajax समय देरी कुछ समय एक गंभीर मुद्दा बना देता है।

जब मैं te तेज़ी से टाइप करता हूं। t कीवर्ड के लिए AJAX खोज te की तुलना में देर से आती है। मुझे नहीं पता कि इस तरह के मामलों को कैसे संभालना है।

परिणाम जबकि तेजी ajax देरी की वजह से te कीवर्ड टाइप। परिणाम t कीवर्ड आता है।

मेरा मानना ​​है कि मैंने पाठक ज्ञान को समझाया था।

Answer 1

आप की जाँच करनी चाहिए अगर मूल्य समय के साथ बदल गया है:

var searchRequest = null; 

$(function() { 
    var minlength = 3; 

    $("#sample_search").keyup(function() { 
     var that = this, 
     value = $(this).val(); 

     if (value.length >= minlength) { 
      if (searchRequest != null) 
       searchRequest.abort(); 
      searchRequest = $.ajax({ 
       type: "GET", 
       url: "sample.php", 
       data: { 
        'search_keyword' : value 
       }, 
       dataType: "text", 
       success: function(msg){ 
        //we need to check if the value is the same 
        if (value==$(that).val()) { 
        //Receiving the result of search here 
        } 
       } 
      }); 
     } 
    }); 
}); 

संपादित करें:

searchRequest चर सर्वर करने के लिए कई अनावश्यक अनुरोधों को रोकने के लिए जोड़ा गया है।

Answer 2

सबसे पहले मैं सुझाव दूंगा कि प्रत्येक कीप पर अजाक्स कॉल करना अच्छा नहीं है (और यह आप इस समस्या में क्यों भागते हैं)।

दूसरा आप KeyUp उपयोग करने के लिए तो इनपुट बॉक्स के बाद एक लोड हो रहा है छवि दिखाने के उपयोगकर्ता इसके अभी भी लोड हो रहा है (आप की तरह उपयोग चित्र लोड टिप्पणी जोड़ने पर मिलता है) को दिखाने के लिए

Answer 3

XMLHttpRequest वस्तु की पकड़ रखें चाहते हैं कि $.ajax() रिटर्न और फिर अगली कीप पर, कॉल करें .abort()। उसे पिछले AJAX अनुरोध को मारना चाहिए और आपको नया करने देना चाहिए।

var req = null; 

function search_func(value) 
{ 
    if (req != null) req.abort(); 

    req = $.ajax({ 
     type: "GET", 
     url: "sample.php", 
     data: {'search_keyword' : value}, 
     dataType: "text", 
     success: function(msg){ 
        //Receiving the result of search here 
     } 
    }); 
} 

Answer 4

पॉइंटर्स के जोड़े। सबसे पहले, भाषा जावास्क्रिप्ट की एक बहिष्कृत विशेषता है। एचटीएमएल (5) में आप विशेषता को छोड़ सकते हैं, या टाइप = "टेक्स्ट/जावास्क्रिप्ट" का उपयोग कर सकते हैं। दूसरा, आप jQuery का उपयोग कर रहे हैं तो जब आप jQuery के साथ ऐसा कर सकते हैं तो आपके पास इनलाइन फ़ंक्शन कॉल क्यों है?

 
$(function(){ 

    // Document is ready 

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

     $.ajax({ 
      type: "GET", 
      url: "sample.php", 
      data: {'search_keyword' : value}, 
      dataType: "text", 
      success: function(msg) 
      { 
       //Receiving the result of search here 
      } 
     }); 

    }); 

}); 

मैं कुंजीपटल घटना के बीच थोड़ी देर देरी और AJAX फ़ंक्शन को कॉल करने का सुझाव दूंगा। आप क्या कर सकते हैं यह सेट करने के लिए सेटटाइमआउट का उपयोग करें कि उपयोगकर्ता ने आपके AJAX फ़ंक्शन को कॉल करने से पहले टाइपिंग समाप्त कर दी है।

Answer 5

jQuery UI autocomplete का उपयोग करने का प्रयास करें। आपको कई निम्न-स्तरीय कोडिंग से बचाता है।