जावास्क्रिप्ट- किसी पृष्ठ के भीतर टेक्स्ट ढूंढें और पृष्ठ

Question

में स्थान पर जाएं मेरे पास रिकॉर्ड की एक बड़ी सूची (तालिका में डेटा की 250+ पंक्तियां कहें) के साथ एक वेबपृष्ठ है और तुरंत पृष्ठ पर जाने में सक्षम होना चाहते हैं, तुरंत शुरू करें टाइपिंग, और यह मुझे पहली पंक्ति पर कूदता है जो मैंने टाइप किए गए पाठ से मेल खाता है।

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

मैंने खिड़की के साथ कोशिश की है। (लेकिन) लेकिन बहुत सफलता नहीं मिली है ... क्या कोई कामकाजी समाधान का समर्थन कर सकता है?

मैं अनिवार्य रूप से अपने कीबोर्ड पर 'CTRL-F' मारने के बराबर की तलाश कर रहा हूं ... इसे करने के लिए CTRL-F को हिट करने की आवश्यकता के बिना।

Answer 1

मुझे लगता है कि इसका मुश्किल हिस्सा वास्तव में उपयोगकर्ता इनपुट को समझदारी से स्वीकार कर रहा है। इसलिए, मैं कहूंगा कि सबसे अच्छा काम यह है कि आप अपनी खोज को स्वत: पूर्ण-प्रकार प्लगइन में पास कर दें। एक बार पृष्ठ तैयार होने के बाद, आप एक इनपुट टेक्स्ट बॉक्स पर फोकस पास करते हैं, और उसके बाद प्लगइन को अपने जादू के रूप में खोजते हैं ...

उदाहरण के लिए, आप quicksearch प्लगइन का उपयोग कर सकते हैं।

तो इस तरह के डेटा का एक मेज और एक इनपुट दिया:

<input id="searcher" type="text" name="searcher"> 

आप एक तैयार समारोह है कि इस तरह दिखता है हो सकता है:

$('#searcher').quicksearch('table tbody tr', { 
    'delay': 100, 
    'bind': 'keyup keydown', 
    'show': function() { 
     if ($('#searcher').val() === '') { 
      return; 
     } 
     $(this).addClass('show'); 
    }, 
    'onAfter': function() { 
     if ($('#searcher').val() === '') { 
      return; 
     } 
     if ($('.show:first').length > 0){ 
      $('html,body').scrollTop($('.show:first').offset().top); 
     } 
    }, 
    'hide': function() { 
     $(this).removeClass('show'); 
    }, 
    'prepareQuery': function(val) { 
     return new RegExp(val, "i"); 
    }, 
    'testQuery': function(query, txt, _row) { 
     return query.test(txt); 
    } 
}); 

$('#searcher').focus(); 

इसे यहां का प्रयास करें: http://jsfiddle.net/ZLhAd/369/

EDIT: इनपुट को ठीक करने के लिए अन्य उत्तर/टिप्पणी में जोड़ा गया है और इतनी हास्यास्पद रूप से कूदने वाले स्कॉलबार को रोकें।

Answer 2

ठीक है, यहाँ अलग राय है, सीधे कुंजी दबाने का उपयोग कर:

http://jsfiddle.net/ryleyb/VFVZL/1/

मूल रूप से, बाँध कुंजी दबाने और उपयोग करते हैं:

$('body').keypress(function(e) { 
    $('#typed').append(String.fromCharCode(e.which)); 
    if (!findString($('#typed').text())) { 
     $('#typed').text(''); 
    } 
}); 

findString बस कुछ अस्पष्ट पार ब्राउज़र पृष्ठ स्ट्रिंग खोजक है। विवरण के लिए पहेली देखें।