एक प्रविष्टि टाइप करने के विकल्प के साथ HTML कॉम्बो बॉक्स

Question 1

मैं इस धारणा के तहत था कि आप सूची में पहले से मौजूद किसी भी मान का चयन करने के अलावा कॉम्बो बॉक्स में टाइप कर सकते हैं। हालाँकि, मुझे यह पता नहीं लग सकता है कि यह कैसे करना है। क्या टेक्स्ट टाइपिंग की अनुमति देने के लिए मुझे इसमें कोई संपत्ति जोड़ने की आवश्यकता है?

Question 2

पहले datalist(नीचे नोट देखें), आप inputलोगों को अपने स्वयं के विकल्प में टाइप करने के लिए एक अतिरिक्त तत्व की आपूर्ति करेंगे ।

<select name="example">
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="-">Other</option>
</select>

<input type="text" name="other">

स्निपेट का विस्तार करें

यह तंत्र सभी ब्राउज़रों में काम करता है और इसके लिए जावास्क्रिप्ट की आवश्यकता होती है ।

यदि आप input"अन्य" विकल्प चुना गया था , तो केवल दिखाने के बारे में चतुर होने के लिए आप थोड़ा जावास्क्रिप्ट का उपयोग कर सकते हैं ।

datalist तत्व

datalistतत्व इस अवधारणा के लिए एक बेहतर प्रणाली प्रदान करने का इरादा है। कुछ ब्राउज़रों में, जैसे कि आईओएस सफारी <12.2, यह समर्थित नहीं था या कार्यान्वयन में समस्या थी। वर्तमान डटलिस्ट समर्थन को देखने के लिए क्या मैं आई पेज का उपयोग कर सकता हूं ।

<input type="text" name="example" list="exampleList">
<datalist id="exampleList">
  <option value="A">  
  <option value="B">
</datalist>

स्निपेट का विस्तार करें

Question 3

HTML में, आप इसे पीछे की ओर करते हैं: आप एक टेक्स्ट इनपुट परिभाषित करते हैं:

<input type="text" list="browsers" />

और इसके लिए एक डतालिस्ट संलग्न करें। (इनपुट की सूची विशेषता पर ध्यान दें)।

<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

Question 4

यह लिंक आपकी मदद कर सकता है: http://www.scriptol.com/html5/combobox.php

आपके पास दो उदाहरण हैं। एचटीएमएल 4 में एक और एचटीएमएल 5 में अन्य

एचटीएमएल 5

<input type="text" list="browsers"/>
 <datalist id="browsers">
    <option>Google</option>
    <option>IE9</option>
 </datalist>

HTML4

 <input type="text" id="theinput" name="theinput" />
 <select name="thelist" onChange="combo(this, 'theinput')">
   <option>one</option>
   <option>two</option>
   <option>three</option>
 </select>

 function combo(thelist, theinput) {
     theinput = document.getElementById(theinput);
     var idx = thelist.selectedIndex;
     var content = thelist.options[idx].innerHTML;
     theinput.value = content;
 }

Question 5

dojoयहाँ उदाहरण है जब ज्यादातर मामलों में मौजूदा कोड के लिए आवेदन किया काम नहीं करते। इसके लिए मुझे एक विकल्प ढूंढना था, यहाँ पाया गया - hxxp: //technologymantrablog.com/how-to-create-a-combo-box-with-text-input-jquery-autocobplete/ (अब एक स्पैम साइट पर इंगित करता है या इससे भी बदतर) )

archive.org (बहुत उपयोगी नहीं)

यहाँ है jsfiddle - https://jsfiddle.net/ze7fgby7/

Question 6

खैर यह 2016 है और कॉम्बो करने के लिए अभी भी कोई आसान तरीका नहीं है ... यकीन है कि हमारे पास डेंटलिस्ट है लेकिन सफारी / आईओएस समर्थन के बिना यह वास्तव में उपयोग करने योग्य नहीं है। कम से कम हमारे पास ईएस 6 है .. नीचे एक कॉम्बो क्लास में एक प्रयास है जो एक डिव या स्पैन को लपेटता है, इसे चयन के शीर्ष पर एक इनपुट बॉक्स डालकर कॉम्बो में बदल देता है और संबंधित घटनाओं को बांधता है।

कोड देखें: https://github.com/kofifus/Combo

(कोड https://github.com/kofifus/New से वर्ग पैटर्न पर निर्भर करता है )

कॉम्बो बनाना आसान है! बस इसे बनाने के लिए एक div पास:

let mycombo=Combo.New(document.getElementById('myCombo'));
mycombo.options(['first', 'second', 'third']);

mycombo.onchange=function(e, combo) {
  let val=combo.value;
  // let val=this.value; // same as above
  alert(val);
 }

<script src="https://rawgit.com/kofifus/New/master/new.min.js"></script>
<script src="https://rawgit.com/kofifus/Combo/master/combo.min.js"></script>

<div id="myCombo" style="width:100px;height:20px;"></div>

स्निपेट का विस्तार करें

Question 7

यह बहुत छोटा है, इसमें जेकरी की आवश्यकता नहीं है और सफारी में बेहतर काम करता है। https://github.com/Fyrd/purejs-datalist-polyfill/

संशोधन के लिए समस्याओं की जाँच करें एक डाउनरो को जोड़ने के लिए। https://github.com/Fyrd/purejs-datalist-polyfill/issues

Question 8

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

बात यह है कि कॉम्बोक्स को केवल ड्रॉपडाउन आइकन को टेक्स्टबॉक्स के ऊपर दिखाई देना है। और टेक्स्टबॉक्स कॉम्बोक्स के हिस्से के नीचे थोड़ा चौड़ा है, इसलिए आपको इसका दाहिना छोर नहीं दिखता है - कॉम्बोक्स के साथ नेत्रहीन जारी है: https://jsfiddle.net/dLsx0c5y/2/

select#programmoduleselect
{
    clip: rect(auto auto auto 331px);
    width: 351px;
    height: 23px;
    z-index: 101; 
    position: absolute;
}

input#programmodule
{
    width: 328px;
    height: 17px;
}

<table><tr>
<th>Programm / Modul:</th>
<td>
    <select id="programmoduleselect"
        onchange="var textbox = document.getElementById('programmodule'); textbox.value = (this.selectedIndex == -1 ? '' : this.options[this.selectedIndex].value); textbox.select(); fireEvent2(textbox, 'change');"
        onclick="this.selectedIndex = -1;">
        <option value=RFEM>RFEM</option>
        <option value=RSTAB>RSTAB</option>
        <option value=STAHL>STAHL</option>
        <option value=BETON>BETON</option>
        <option value=BGDK>BGDK</option>
    </select>
    <input name="programmodule" id="programmodule" value="" autocomplete="off"
        onkeypress="if (event.keyCode == 13) return false;" />
</td>
</tr></table>

(मूल रूप से यहां इस्तेमाल किया गया है, लेकिन फ़ॉर्म न भेजें: पुराना .lubal.com/WishedFeatures.aspx)

संपादित करें: शैलियों को macOS के लिए थोड़ा अलग होने की आवश्यकता है: Ch ठीक है, FF के लिए कॉम्बोक्स की ऊँचाई बढ़ाने के लिए, Safari और Opera combobox की ऊँचाई को अनदेखा करते हैं, इसलिए उनके फ़ॉन्ट का आकार बढ़ाएं (ऊपरी सीमा है, इसलिए तब टेक्स्टबॉक्स घटाएं) ऊंचाई थोड़ी): https://i.stack.imgur.com/efQ9i.png

Question 9

यह देखते हुए कि HTML डिटॉलिस्ट टैग अभी भी पूरी तरह से समर्थित नहीं है, एक वैकल्पिक दृष्टिकोण जो मैंने उपयोग किया है वह है Dojo Toolkit ComboBox । इसे लागू करना आसान था और मेरे द्वारा खोजे गए अन्य विकल्पों की तुलना में बेहतर प्रलेखित। यह मौजूदा रूपरेखाओं के साथ अच्छी तरह से खेलता है। मेरे मामले में, मैंने इस कॉम्बोक्स को एक मौजूदा वेबसाइट पर जोड़ा, जो कोडिग्निटर और बूटस्ट्रैप पर आधारित है, जिसमें कोई समस्या नहीं है। आपको बॉडी टैग के बजाय कॉम्बो के पेरेंट एलिमेंट के लिए डोजो थीम (जैसे क्लास = "क्लारो") को लागू करना सुनिश्चित करना होगा। स्टाइल संघर्ष से बचने के लिए।

सबसे पहले, Dojo विषयों में से एक के लिए CSS (जैसे 'क्लारो') शामिल करें। यह महत्वपूर्ण है कि नीचे दिए गए जेएस फाइलों से पहले सीएसएस फाइल शामिल है।

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/dojo/1.9.6/dijit/themes/claro/claro.css" />

अगला, CDN के माध्यम से jQuery और Dojo टूलकिट शामिल करें

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/dojo/1.10.3/dojo/dojo.js"></script>

अगला, आप बस Dojo के सैंपल कोड का पालन कर सकते हैं या काम कर रहे कॉम्बोक्स प्राप्त करने के लिए नीचे दिए गए सैंपल का उपयोग कर सकते हैं।

<body>
    <!-- Dojo Dijit ComboBox with 'Claro' theme -->
    <div class="claro"><input id="item_name_1" class=""/></div>

    <script type="text/javascript">
        $(document).ready(function () {
            //In this example, dataStore is simply an array of JSON-encoded id/name pairs
            dataStore = [{"id":"43","name":"Domain Name Renewal"},{"id":"42","name":"Hosting Renewal"}];

            require(
                [ "dojo/store/Memory", "dijit/form/ComboBox", "dojo/domReady!"], 
                function (Memory, ComboBox) {
                    var stateStore = new Memory({
                        data: dataStore
                    });

                    var combo = new ComboBox({
                        id: "item_name_1",
                        name: "desc_1",
                        store: stateStore,
                        searchAttr: "name"},                        
                        "item_name_1"
                        ).startup();

                });

        });

    </script>
</body>

Question 10

इस साइट पर कॉम्बो बॉक्स या कॉम्बो को देखें : http://www.jeasyui.com/documentation/index.php#

Question 11

    <html>
<head>
    <title></title>
    <script src="jquery-3.1.0.js"></script>
    <script>
        $(function () {
            $('#selectnumber').change(function(){
                alert('.val() = ' + $('#selectnumber').val() + '  AND  html() = ' + $('#selectnumber option:selected').html() + '  AND .text() = ' + $('#selectnumber option:selected').text());
            })
        });
    </script>
</head>
<body>
       <div>
        <select id="selectnumber">
            <option value="1">one</option>
            <option value="2">two</option>
            <option value="3">three</option>
            <option value="4">four</option>
        </select>

    </div>
   </body>
</html>

धन्यवाद...:)

Question 12

अन्य उत्तरों में से कोई भी संतोषजनक नहीं था, मोटे तौर पर क्योंकि यूआई अभी भी खराब दिखता है। मुझे यह मिल गया , जो अच्छा लग रहा है और एकदम सही होने के साथ-साथ अनुकूलन योग्य है।

उदाहरणों और विकल्पों की पूरी सूची और इस तरह यहां पाया जा सकता है , लेकिन यहां एक मूल डेमो है:

$('#editable-select').editableSelect();

<link href="https://cdn.jsdelivr.net/npm/jquery-editable-select@2.2.5/dist/jquery-editable-select.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-editable-select@2.2.5/dist/jquery-editable-select.min.js"></script>

<select id="editable-select">
	<option>Alfa Romeo</option>
	<option>Audi</option>
	<option>BMW</option>
	<option>Citroen</option>
</select>

स्निपेट का विस्तार करें