जावास्क्रिप्ट कीबोर्ड घटना प्राइमर? (या बल्कि: मेरे कस्टम ड्रॉपडाउन के साथ मेरी मदद करें)

मुझे अपने कस्टम निर्मित AJAX [div] आधारित गतिशील ड्रॉपडाउन को समाप्त करने में सहायता चाहिए।

असल में, मेरे पास एक [इनपुट] बॉक्स है जो; onkeyup , एक अजाक्स खोज चलाता है जो div s में परिणामों का एक समूह देता है और innerHTML का उपयोग करके वापस खींचा जाता है। ये div s में सभी को onmouseover हाइलाइट किया गया है, इसलिए, एक सामान्य सफल खोज निम्न संरचना उत्पन्न करती है (सेमी-कोड क्षमा करें):

[input]
 [div id=results] //this gets overwritten contantly by my AJAX function
  [div id=result1 onmouseover=highlight onclick=input.value=result1]
  [div id=result2 onmouseover=highlight onclick=input.value=result2]
  [div id=result2 onmouseover=highlight onclick=input.value=result2]
 [/div]

यह काम करता है .. खूबसूरती से! सुरुचिपूर्ण लग रहा है और किसी भी नियमित ड्रॉपडाउन से अधिक पूर्ण तरीका है (वे परिणाम div बहुत सारी जानकारी लाते हैं)।

However, I'm missing the most of important functions behind regular HTML elements, that is, I can't keyboard down or up between "options". How do I do this? I know JavaScript handles keyboard events but; I haven't been able to find a good guide on how to do this. (Of course, the follow up question to this will eventually end up being: can I use to trigger that onclick event?)

0
ro fr bn

2 उत्तर

मेरे सिर के ऊपर से, मुझे लगता है कि आपको जावास्क्रिप्ट में डेटा संरचना का कुछ रूप बनाए रखना होगा जो वर्तमान ड्रॉपडाउन सूची में आइटम को दर्शाता है। आपको वर्तमान में सक्रिय / चयनित आइटम के संदर्भ की भी आवश्यकता होगी।

प्रत्येक बार keyup या keydown निकाल दिया जाता है, डेटा संरचना में सक्रिय / चयनित आइटम के संदर्भ को अद्यतन करें। यूआई पर हाइलाइटिंग जानकारी प्रदान करने के लिए, सीएसएस के माध्यम से स्टाइल किए गए क्लास नाम को जोड़ें या हटाएं, यदि आइटम सक्रिय / चयनित है या नहीं।

साथ ही, यह एक बड़ी बात नहीं है, लेकिन innerHTML वास्तव में मानक नहीं है ( createTextNode() , createElement() , और डेटा बनाने के मानक तरीकों के लिए appendChild() )। आप HTML विशेषता में ऐसा करने के बजाय जावास्क्रिप्ट में ईवेंट हैंडलर को जोड़ने के बारे में भी देखना चाह सकते हैं।

0
जोड़ा

आपको क्या करने की ज़रूरत है ईवेंट श्रोताओं को div id = "results" के साथ संलग्न करें। जब आप इसे बनाते हैं तो onkeyup , onkeydown , आदि को जोड़कर आप इसे div जोड़कर कर सकते हैं या आप इसे जावास्क्रिप्ट का उपयोग करके संलग्न कर सकते हैं।

मेरी सिफारिश यह होगी कि आप एक AJAX लाइब्रेरी का उपयोग करें जैसे YUI , jQuery , प्रोटोटाइप , आदि दो कारणों से:

  1. ऐसा लगता है कि आप एक ऑटो पूर्ण बनाने का प्रयास कर रहे हैं नियंत्रण जो कुछ सबसे AJAX मुक्ति प्रदान करना चाहिए। यदि आप किसी मौजूदा घटक का उपयोग कर सकते हैं तो आप स्वयं को बहुत समय बचाएंगे।
  2. यहां तक ​​कि यदि आप लाइब्रेरी द्वारा प्रदान किए गए नियंत्रण का उपयोग नहीं करना चाहते हैं, तो भी सभी पुस्तकालय ईवेंट लाइब्रेरी प्रदान करते हैं जो विभिन्न ब्राउज़रों द्वारा प्रदान की गई ईवेंट एपीआई के बीच अंतर को छिपाने में मदद करते हैं।

Forget addEvent, use Yahoo!?s Event Utility provides a good summary of what an event library should provide for you. I'm pretty sure that the event libraries provided by jQuery, Prototype, et. al. provide similar features.

यदि वह लेख आपके सिर पर जाता है तो यह दस्तावेज़ पहले और फिर देखें मूल आलेख को दोबारा पढ़ें (मैंने घटना लाइब्रेरी का उपयोग करने के बाद लेख को और अधिक समझ में पाया)।

कुछ अन्य चीजें:

  • जावास्क्रिप्ट का उपयोग करके आप अपने एचटीएमएल में onkeyup आदि लिखने से ज्यादा नियंत्रण प्राप्त कर सकते हैं। जब तक आप कुछ वास्तव में सरल नहीं करना चाहते मैं जावास्क्रिप्ट का उपयोग करूंगा।
  • यदि आप कीबोर्ड ईवेंट को संभालने के लिए अपना कोड लिखते हैं तो अच्छा कुंजी कोड संदर्भ वास्तव में आसान है।
0
जोड़ा