एचटीएमएल कैच इवेंट जब उपयोगकर्ता टेक्स्ट इनपुट में टाइप कर रहा है

Question

मैं बस सोच रहा हूं कि जब मैं अपने वेब एप्लिकेशन पर टेक्स्ट इनपुट फ़ील्ड में टाइप कर रहा हूं तो ईवेंट को पकड़ने के लिए मैं कैसे जाता हूं।

परिदृश्य है, मेरे पास एक संपर्क सूची ग्रिड है। फॉर्म के शीर्ष पर उपयोगकर्ता उस संपर्क का नाम टाइप कर सकता है जिसे वे ढूंढने की कोशिश कर रहे हैं। एक बार पाठ इनपुट में 1 से अधिक वर्ण होने के बाद, मैं उस सिस्टम में संपर्कों को खोजना शुरू करना चाहता हूं जिसमें उपयोगकर्ता द्वारा दर्ज किए गए वर्ण शामिल हैं। जैसे ही वे डेटा परिवर्तन टाइप करते रहते हैं।

यह वास्तव में एक सरल प्रकार की आगे की कार्यक्षमता (या स्वत: पूर्ण) है लेकिन मैं डेटा को एक अलग नियंत्रण में बंद करना चाहता हूं।

इनपुट इनपुट खो जाने के बाद मैं इनपुट से टेक्स्ट प्राप्त कर सकता हूं, लेकिन यह स्थिति में फिट नहीं है।

कोई भी विचार?

धन्यवाद

Answer 1

उपयोग उपयोगकर्ता प्रकार के रूप में मूल्य पर कब्जा, और जो यह आपको लगता है कि मूल्य के लिए खोज करने के लिए करते हैं करने के लिए KeyUp घटना:

$('input').on('keyup', function() { 
    if (this.value.length > 1) { 
      // do search for this.value here 
    } 
}); 

एक अन्य विकल्प input घटना होगी, जो कुंजी, चिपकने आदि से किसी भी इनपुट को पकड़ता है।

Answer 2

मैं 'input' और 'propertychange' ईवेंट का उपयोग करूंगा। वे माउस के माध्यम से कट और पेस्ट पर भी आग लगते हैं।

इसके अलावा, debouncing पर अपने ईवेंट हैंडलर पर विचार करें ताकि तेजी से टाइपिस्ट को कई डोम रीफ्रेश द्वारा दंडित नहीं किया जा सके।

आप हर .input कक्षाओं के बाद .combo रखना चाहिए:

Answer 3

मेरी कोशिश देखते हैं।

.input एक पाठ बॉक्स और .combo एक div

$(".input").keyup(function(){ 
    var val = this.value; 
    if (val.length > 1) { 
     //you search method... 
    } 
    if (data) $(this).next(".combo").html(data).fadeIn(); else $(this).next(".combo").hide().html(""); 
}); 

$(".input").blur(function(){ 
    $(this).next(".combo").hide(); 
}); 

Answer 4

घटना oninput एचटीएमएल का प्रयोग क्यों नहीं है?

<input type="text" oninput="searchContacts()">