2008-08-07 22 views
14

मुझे अपने कस्टम निर्मित AJAX [div] आधारित गतिशील ड्रॉपडाउन को समाप्त करने में सहायता चाहिए।जावास्क्रिप्ट कीबोर्ड घटना प्राइमर? (या इसके बजाय: मेरी कस्टम ड्रॉपडाउन के साथ मेरी सहायता करें)

असल में, मेरे पास एक [इनपुट] बॉक्स है जो; onkeyup, एक अजाक्स खोज चलाता है जो div एस में परिणामों का एक गुच्छा देता है और innerHTML का उपयोग करके वापस खींचा जाता है। ये div सब पर प्रकाश डाला है 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 बहुत सारी जानकारी लाते हैं)।

हालांकि, मैं नियमित HTML तत्वों के पीछे सबसे महत्वपूर्ण कार्यों को याद कर रहा हूं, यानी, मैं "विकल्प" के बीच कीबोर्ड या नीचे नहीं जा सकता। मैं यह कैसे करु? मुझे पता है जावास्क्रिप्ट हैंडल कुंजीपटल घटनाओं लेकिन; मैं यह कैसे करना है इस पर एक अच्छी मार्गदर्शिका नहीं पा रहा हूं। (बेशक, इसका अनुवर्ती प्रश्न अंततः समाप्त हो जाएगा: क्या मैं <ENTER> का उपयोग onclick ईवेंट ट्रिगर करने के लिए कर सकता हूं?)

उत्तर

4

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

मेरे सिफारिश होगा कि आप दो कारणों के लिए YUI की तरह एक AJAX पुस्तकालय, jQuery, Prototype, आदि का उपयोग करें:

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

Forget addEvent, use Yahoo!’s Event Utility आपके लिए एक ईवेंट लाइब्रेरी प्रदान करने का एक अच्छा सारांश प्रदान करता है। मुझे पूरा यकीन है कि jQuery पुस्तकालय, प्रोटोटाइप, आदि द्वारा प्रदान की जाने वाली घटना पुस्तकालय। अल। समान सुविधाएं प्रदान करें।

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

अन्य चीजों के एक जोड़े:

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

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

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

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