html - एक में ड्रॉप डाउन मेनू/टेक्स्ट फील्ड




html-select html-input (4)

विकल्प 1

स्क्रिप्ट को dhtmlgoodies से शामिल करें और इस तरह से प्रारंभ करें:

<input type="text" name="myText" value="Norway"
       selectBoxOptions="Canada;Denmark;Finland;Germany;Mexico"> 
createEditableSelect(document.forms[0].myText);

विकल्प 2

यहां एक कस्टम सॉल्यूशन दिया गया है, जो एक <select> एलिमेंट और <input> एलिमेंट को जोड़ता है, उन्हें स्टाइल करता है, और जावास्क्रिप्ट के माध्यम से आगे और पीछे टॉगल करता है

<div style="position:relative;width:200px;height:25px;border:0;padding:0;margin:0;">
  <select style="position:absolute;top:0px;left:0px;width:200px; height:25px;line-height:20px;margin:0;padding:0;"
          onchange="document.getElementById('displayValue').value=this.options[this.selectedIndex].text; document.getElementById('idValue').value=this.options[this.selectedIndex].value;">
    <option></option>
    <option value="one">one</option>
    <option value="two">two</option>
    <option value="three">three</option>
  </select>
  <input type="text" name="displayValue" id="displayValue" 
         placeholder="add/select a value" onfocus="this.select()"
         style="position:absolute;top:0px;left:0px;width:183px;width:180px\9;#width:180px;height:23px; height:21px\9;#height:18px;border:1px solid #556;"  >
  <input name="idValue" id="idValue" type="hidden">
</div>

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

उदाहरण के लिए: मान लीजिए कि एक amount ड्रॉप डाउन मेनू है, और इसके तत्व (1,2,3) हैं;

मान लीजिए कि क्लाइंट को 5 की राशि की आवश्यकता है - यह उसका अधिकार है - यह ड्रॉप डाउन सूची में मौजूद नहीं है, इसलिए ग्राहक को अब राशि को अनिवार्य रूप से दर्ज करना होगा। तो किसी भी प्रविष्टि के लिए ग्राहक को या तो ड्रॉप डाउन सूची में से चयन करना होगा या राशि दर्ज करनी होगी।

मेरी समस्या के वर्णन के बाद, और सरल उदाहरण जो मैंने आपको पेश किया है, यहाँ मेरा प्रश्न है:

वहाँ एक ड्रॉप डाउन मेनू और एक पाठ क्षेत्र बनाने के लिए HTML कोड है, दोहरी के रूप में, अलग नहीं?


Jaj fiddle से प्रेरित होकर @ajdeguzman (मेरा दिन बनाया), यहाँ मेरा नोड / रिएक्शन व्युत्पन्न है:

 <div style={{position:"relative",width:"200px",height:"25px",border:0,
              padding:0,margin:0}}>
    <select style={{position:"absolute",top:"0px",left:"0px",
                    width:"200px",height:"25px",lineHeight:"20px",
                    margin:0,padding:0}} onChange={this.onMenuSelect}>
            <option></option>
            <option value="starttime">Filter by Start Time</option>
            <option value="user"     >Filter by User</option>
            <option value="buildid"  >Filter by Build Id</option>
            <option value="invoker"  >Filter by Invoker</option>
    </select>
    <input name="displayValue" id="displayValue" 
           style={{position:"absolute",top:"2px",left:"3px",width:"180px",
                   height:"21px",border:"1px solid #A9A9A9"}}
           onfocus={this.select} type="text" onChange={this.onIdFilterChange}
           onMouseDown={this.onMouseDown} onMouseUp={this.onMouseUp} 
           placeholder="Filter by Build ID"/>
 </div>

इस तरह दिखता है:


मुझे jQuery टोकन इनपुट पसंद है। वास्तव में ऊपर उल्लिखित कुछ अन्य विकल्पों में से UI पसंद करते हैं।

http://loopj.com/jquery-tokeninput/

यह भी देखें: http://railscasts.com/episodes/258-token-fields एक स्पष्टीकरण के लिए


मुझे यह सवाल और चर्चा बहुत मददगार लगी और मैं जिस समाधान को खत्म करना चाहता था, उसे दिखाना चाहता था। यह @DevangRathod द्वारा दिए गए उत्तर पर आधारित है, लेकिन मैंने jQuery का उपयोग किया और एक जोड़े को इसके लिए ट्विस्ट किया, इसलिए किसी और के समान काम करने में मदद करने के लिए पूरी तरह से टिप्पणी किए गए नमूने को दिखाना चाहता था। मैं मूल रूप से HTML5 डेटा-सूची तत्व का उपयोग कर रहा था, लेकिन उस समाधान से असंतुष्ट था क्योंकि यह ड्रॉप डाउन सूची से विकल्प हटाता है जो बॉक्स में टाइप किए गए पाठ से मेल नहीं खाता है। मेरे आवेदन में, मैं चाहता था कि पूरी सूची हमेशा उपलब्ध हो।

पूरी तरह कार्यात्मक यहाँ डेमो: https://jsfiddle.net/abru77mm/

HTML:

<!-- 
Most style elements I left to the CSS file, but some are here.
Reason being that I am actually calculating my width dynamically
in my application so when I dynamically formulate this HTML, I
want the width and all the factors (such as padding and border
width and margin) that go into determining the proper widths to
be controlled by one piece of code, so those pieces are done in
the in-line style.  Otherwise I leave the styling to the CSS file.
-->
<div class="data-list-input" style="width:190px;">
  <select class="data-list-input" style="width:190px;">
    <option value="">&lt;Free Form Text&gt;</option>
    <option value="Male">Male</option>
    <option value="Female">Female</option>
    <!-- Note that though the select/option allows for a different
    display and internal value, there is no such distinction in the
    text box, so for all the options (except the "none" option) the
    value and content of the option should be identical. -->
  </select>
  <input class="data-list-input" style="width:160px;padding:4px 6px;border-width:1px;margin:0;" type="text" name="sex" required="required" value="">
</div>

जे एस:

jQuery(function() {
  //keep the focus on the input box so that the highlighting
  //I'm using doesn't give away the hidden select box to the user
  $('select.data-list-input').focus(function() {
    $(this).siblings('input.data-list-input').focus();
  });
  //when selecting from the select box, put the value in the input box
  $('select.data-list-input').change(function() {
    $(this).siblings('input.data-list-input').val($(this).val());
  });
  //When editing the input box, reset the select box setting to "free
  //form input". This is important to do so that you can reselect the
  //option you had selected if you want to.
  $('input.data-list-input').change(function() {
    $(this).siblings('select.data-list-input').val('');
  });
});

सीएसएस:

div.data-list-input
{
    position: relative;
    height: 20px;
    display: inline-flex;
    padding: 5px 0 5px 0;
}
select.data-list-input
{
    position: absolute;
    top: 5px;
    left: 0px;
    height: 20px;
}
input.data-list-input
{
    position: absolute;
    top: 0px;
    left: 0px;
    height: 20px;
}

मेरे कार्यान्वयन में सुधार के लिए कोई टिप्पणी। आशा है कि कोई इसे मददगार मिले।





html-input