आप लाइव खोज की "अंतराल" समस्या को कैसे हल करते हैं?

Question

नमस्ते मैं अपने वेबपैप में एक लाइव खोज (= टाइप करते समय खोज) सुविधा लागू कर रहा हूं। वर्तमान में मैं AJAX पोस्ट के माध्यम से खोज अनुरोध भेजने के लिए कुंजीपटल ईवेंट का उपयोग कर रहा हूं उदा।

$('#SearchField').keyup(function(e) { 
     $.post(
      ... 
     ); 
}); 

लेकिन इस "समस्या" के बाद जब मैं खोज अंतराल समस्या किसी तरह का होता है, कुछ मामलों में, उदाहरण के लिए, "समर्थक" के लिए प्रतिक्रिया रास्ता दिखाता है "समस्या" के लिए प्रतिक्रिया के बाद और अधिलेखित कर देता है बड़े परिणाम के साथ सही खोज परिणाम।

इस व्यवहार से निपटने के लिए एक अच्छा तरीका क्या होगा?

तिया

Answer 1

आप पिछले अनुरोध

var xhr = null; 
$('#SearchField').keyup(function(e) { 
    if (xhr !== null) xhr.abort(); 
    xhr = $.post(
    ... 
); 
}); 

या प्रत्येक अनुरोध करने के लिए सेट असाइन आईडी निरस्त कर सकते हैं। जब कोई अनुरोध पूरा हो जाता है, यदि कोई बड़ी आईडी पहले से वापस आती है, तो उत्तर को अनदेखा करें। अन्यथा, आईडी स्टोर करें।

Answer 2

$('#SearchField').keyup(function(e) { 
    t = setTimeout(function(){   
    $.post(
      ... 
    ); 
    },1000); 
}); 

इस कोड के साथ

, अपने कार्य 1000ms के बाद निष्पादित किया जाएगा। यदि कीप फिर से ट्रिगर हो जाता है, तो यह चर को ओवरराइट कर देगा, और प्रभावी रूप से पहले फ़ंक्शन को रद्द कर देगा। दूसरे शब्दों में, पूरी पोस्ट तब तक नहीं होगी जब तक उपयोगकर्ता 1 सेकंड के लिए टाइपिंग बंद नहीं कर देता।

Answer 3

मैंने एक बार "लाइव सर्च" लागू किया है और केवल इनपुट के बाद खोज शुरू करने के लिए टाइमआउट का उपयोग किया है (आधे सेकेंड या उससे अधिक)। इस तरह से खोज केवल ट्रिगर होगी, अगर उपयोगकर्ता टाइपिंग बंद कर देता है, देरी से परिणाम और सर्वर लोड को कम करता है।

आपके मामले में मैं जांचता हूं, अगर उपयोगकर्ता टाइपिंग जारी रखता है और खोज सबमिट नहीं करेगा या देर से पहुंचने वाले किसी भी "पुराने" परिणाम को प्रदर्शित नहीं करेगा।

Answer 4

अधिकांश ऑटो-पूर्णता उपयोगकर्ता द्वारा टाइप किए जाने वाले स्थान को प्रतिस्थापित नहीं करते हैं - वे उपयोगकर्ता को ड्रॉप डाउन में संभावित विकल्प दिखा सकते हैं। http://view.jquery.com/trunk/plugins/autocomplete/demo/

Answer 5

आप खोज कर दिया गया है, वहाँ मुश्किल यूआई (यूज़र इंटरफ़ेस) या UX (प्रयोक्ता अनुभव) के एक बहुत हैं मुद्दों बनाने में शामिल:

यहाँ एक पहले से ही अच्छी तरह से लिखा स्वत: पूर्ण का एक अद्भुत उदाहरण है एक महान लाइव खोज अनुभव।

मैं याहू में लोगों को यूआई/यूएक्स परीक्षण की भारी भारोत्तोलन छोड़ देता हूं जिन्होंने अपने वेब गुणों पर ऑटो पूर्ण नियंत्रण विकसित किया है। और बेहतर खबर यह है कि उन्होंने इसे ओपन सोर्स के रूप में रिलीज़ किया है: http://developer.yahoo.com/yui/autocomplete/

अच्छी खबर यह नहीं है कि यह JQuery का उपयोग नहीं करता है और आप करते हैं। आप उनके स्रोत को देख सकते हैं और देख सकते हैं कि वे समय के कई मुद्दों को कैसे संभालते हैं, ध्यान दें कि वे अपने टाइमर को कुंजी पर शुरू करते हैं, कुंजी नहीं।

वहाँ भी कैसे फ़्लिकर को लागू करने में पन्ने की खोज के लिए Yaho स्वत: पूर्ण का उपयोग करता है के बारे में एक अच्छा लेख है: http://code.flickr.com/blog/2009/03/18/building-fast-client-side-searches/

Answer 6

चाल रोकता ajax कतारों का उपयोग करने और है, मैं लाइव खोज रहा बनाई गई के लिए एक कस्टम पुस्तकालय लिखा था, फिल्टर मक्खन जैसे 20 मिलियन रिकॉर्ड के माध्यम से (ऑप्टिमाइज्ड ईएवी टेबल क्वेरी गति के साथ मदद करते हैं)। एक jquery AJAX प्रबंधक प्लगइन भी उपलब्ध है जो अच्छी तरह से काम करता है (मुझे थोड़ा और परिष्कृत कुछ चाहिए इसलिए मैंने अपना लिखा)। आप कतार संख्या सेट कर सकते हैं, नई कॉल इत्यादि पर निरस्त कर सकते हैं। इस तरह से अंतिम उपयोगकर्ता इनपुट