प्रोग्रामेटिक रूप से इनपुट का प्रकार [ur = url] जावास्क्रिप्ट

Question

क्रोम में दिखाई देता है और अब के लिए डेटलिस्ट केवल तब दिखाई देता है जब input तत्व पर टाइप या डबल क्लिक करते हैं, उदा। http://jsfiddle.net/r7Y4v/

मैं जल्द ही प्रसववादी को प्रकट करने की कोशिश कर रहा हूं। आदर्श रूप से मैं इनपुट के बगल में थोड़ा "ड्रॉपडाउन तीर" डालूंगा जो क्लिक किए जाने पर डातालिस्ट दिखाई देगा।

मैं एक वेबकिट समाधान की तलाश में हूं।

Answer 1

मुझे विनिर्देशन में कुछ भी नहीं मिला है कि यह कैसे करें।

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

मेरे लिए ऐसा लगता है कि अब अभी भी कोई उचित काम नहीं कर रहा कॉम्बो-बॉक्स और डेटा-सूची इसके बचपन में प्रतीत होता है।

तो ऐसा लगता है कि आप वर्तमान में अपना खुद का रोल करने या तैयार पुस्तकालय का उपयोग करने के बेहतर होंगे।
मुझे लगता है कि 'minimul datalist' पुस्तकालय बल्कि लोकप्रिय है (पढ़ने के लिए अच्छा लिंक)।
उस पृष्ठ पर यह GitHub code और demo page का एक लिंक है।

साइड-नोट:मुझे प्यार है कि कोई बेहतर जवाब देता है! इसके अलावा, मैंने पहले सोचा था कि तीर-बटन छोड़ना अच्छा विचार था ताकि लोग ड्रॉप-डाउन बटन के लिए बेहतर स्टाइल-विकल्प प्राप्त कर सकें, अगर वे चाहते थे कि वे डेटलिस्ट/स्वतः पूर्ण/combobox पर हुक-अप कर सकें । मुझे आश्चर्य है कि यह अभी भी अनिर्दिष्ट लगता है और मूल रूप से समर्थित नहीं है। कृपया, spec-writers, हमें सरल देशी कॉम्बो-बॉक्स दें (जो इतने लंबे समय तक अतिदेय है) और फिर फ़िल्टर की तरह मसाला जोड़ें!

---

संपादित करें: वहाँ क्रोमियम परियोजना है कि एक ड्रॉप-डाउन कार्यक्षमता के लिए पूछता है अगस्त 2012 के बाद से एक खुला फ़ीचर अनुरोध है:

• Issue 152375: Add drop down toggle on input tag with datalist

Answer 2

कैसे की तरह कुछ के बारे में इस? चूंकि क्रोम होवर पर एक आइकन रखता है, इसलिए मैंने इस छवि को रखा ताकि यह एक ही स्थान पर हो।

input[list]{ 
background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAJCAYAAADtj3ZXAAAAB3RJTUUH3wMHFxkH6cbPfQAAAAlwSFlzAAALEgAACxIB0t1+/AAAAARnQU1BAACxjwv8YQUAAABaSURBVHjaY2RgYDAA4jkMxIEsID6FLrgOiP8TwNNwmSgNxJ/xaDwPxGz4nJSDQ+MHIFYn5B9mqA3omsOJDA9w4P1B0jiTWI0wMIFYf2IDPEB8gxh/4jOAIAAAbfwl/FxzevIAAAAASUVORK5CYII='); 
background-repeat:no-repeat; 
background-position:right; 
background-origin: content-box; 
}