Drop Down Menu Text Field in one

Question

I m working on building new site  and I need a drop down menu to select the amount of something in my site  But at the same time I need this drop down list to accept text  So if the client wants to choose from the drop down list then he can  also if the client want to enter the amount by text then he can also  As you can see I want to make it dual   For example  suppose there is an amount drop down menu  and its elements are  1 2 3    Suppose now that the client needs the amount to be 5 - this is his right - it does not exist in the drop down list  so the client now must enter the amount textually   So for any entry the client must either choose from the drop down list or enter the amount textually   After the description of my problem  and the simple example that I have introduced to you  here is my question   Is there HTML code to make a drop down menu and a text field in one  as dual  not separated

User · Answer

You can do this natively with HTML5  lt datalist gt     x000D   x000D   lt label gt Choose a browser from this list  x000D   lt input list  browsers  name  myBrowser    gt  lt  label gt  x000D   lt datalist id  browsers  gt  x000D     lt option value  Chrome  gt  x000D     lt option value  Firefox  gt  x000D     lt option value  Internet Explorer  gt  x000D     lt option value  Opera  gt  x000D     lt option value  Safari  gt  x000D     lt option value  Microsoft Edge  gt  x000D   lt  datalist gt  x000D   x000D   x000D

User · Answer

You can use the  lt datalist gt  tag instead of the  lt select gt  tag   lt input list  quot browsers quot  name  quot browser quot  id  quot browser quot  gt   lt datalist id  quot browsers quot  gt     lt option value  quot Edge quot  gt     lt option value  quot Firefox quot  gt     lt option value  quot Chrome quot  gt     lt option value  quot Opera quot  gt     lt option value  quot Safari quot  gt   lt  datalist gt

User · Answer

I d like to add a jQuery autocomplete based solution that does the job   Step 1  Make the list fixed height and scrollable  Get the code from https   jqueryui com autocomplete   Scrollable  example  setting max height to the list of results so it behaves as a select box   Step 2  Open the list on focus   Display jquery ui auto-complete list on focus event  Step 3  Set minimum chars to 0 so it opens no matter how many chars are in the input  Final result    lt  doctype html gt   lt html lang  en  gt   lt head gt     lt meta charset  utf-8  gt     lt meta name  viewport  content  width device-width  initial-scale 1  gt     lt title gt jQuery UI Autocomplete - Scrollable results lt  title gt     lt link rel  stylesheet  href    code jquery com ui 1 12 1 themes base jquery-ui css  gt     lt link rel  stylesheet  href   resources demos style css  gt     lt style gt     ui-autocomplete       max-height  100px      overflow-y  auto         prevent horizontal scrollbar        overflow-x  hidden           IE 6 doesn t support max-height      we use height instead  but this forces the menu to always be this tall           html  ui-autocomplete       height  100px         lt  style gt     lt script src  https   code jquery com jquery-1 12 4 js  gt  lt  script gt     lt script src  https   code jquery com ui 1 12 1 jquery-ui js  gt  lt  script gt     lt script gt       function         var availableTags            ActionScript          AppleScript          Asp          BASIC          C          C            Clojure          COBOL          ColdFusion          Erlang          Fortran          Groovy          Haskell          Java          JavaScript          Lisp          Perl          PHP          Python          Ruby          Scala          Scheme                  tags    autocomplete           source  availableTags     uncomment this and comment the following to have normal autocomplete behavior       source  function  request  response              response  availableTags                  minLength  0        focus function                this  data  uiAutocomplete   search   this  val        uncomment this and comment the following to have autocomplete behavior when opening           this  data  uiAutocomplete   search                        lt  script gt   lt  head gt   lt body gt    lt div class  ui-widget  gt     lt label for  tags  gt Tags   lt  label gt     lt input id  tags  gt   lt  div gt     lt  body gt   lt  html gt    Check jsfiddle here   https   jsfiddle net bao7fhm3 1

User · Answer

The modern solution is an input field of type  search    https   developer mozilla org en-US docs Web HTML Element input search https   www w3schools com tags tag datalist asp  Somewhere in your HTML you define a datalist for later reference    lt datalist id  mylist  gt      lt option value  Option 1  gt      lt option value  Option 2  gt      lt option value  Option 3  gt   lt  datalist gt    Then you can define your search input like this    lt input type  search  list  mylist  gt    Voil    Very nice and easy

User · Answer

Inspired by the js fiddle by  ajdeguzman  made my day   here is my node React derivative     lt div style   position  relative  width  200px  height  25px  border 0                padding 0 margin 0   gt       lt select style   position  absolute  top  0px  left  0px                       width  200px  height  25px  lineHeight  20px                       margin 0 padding 0   onChange  this onMenuSelect  gt               lt option gt  lt  option gt               lt option value  starttime  gt Filter by Start Time lt  option gt               lt option value  user       gt Filter by User lt  option gt               lt option value  buildid    gt Filter by Build Id lt  option gt               lt option value  invoker    gt Filter by Invoker lt  option gt       lt  select gt       lt 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   gt    lt  div gt    Looks like this

User · Answer

Option 1  Include the script from dhtmlgoodies and initialize like this    lt input type  text  name  myText  value  Norway         selectBoxOptions  Canada Denmark Finland Germany Mexico  gt     createEditableSelect document forms 0  myText     Option 2  Here s a custom solution which combines a  lt select gt  element and  lt input gt  element  styles them  and toggles back and forth via JavaScript   lt div style  position relative width 200px height 25px border 0 padding 0 margin 0   gt     lt 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   gt       lt option gt  lt  option gt       lt option value  one  gt one lt  option gt       lt option value  two  gt two lt  option gt       lt option value  three  gt three lt  option gt     lt  select gt     lt 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     gt     lt input name  idValue  id  idValue  type  hidden  gt   lt  div gt

User · Answer

I found this question and discussion very helpful and wanted to show the solution I ended up with   It is based on the answer given by  DevangRathod  but I used jQuery and made a couple tweaks to it  so wanted to show a fully commented sample to help anyone else working on something similar   I originally had been using the HTML5 data-list element  but was dissatisfied with that solution since it removes options from the drop down list that don t match text typed in the box   In my application  I wanted the full list to always be available   Fully functional demo here  https   jsfiddle net abru77mm   HTML    lt  --  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  -- gt   lt div class  data-list-input  style  width 190px   gt     lt select class  data-list-input  style  width 190px   gt       lt option value    gt  amp lt Free Form Text amp gt  lt  option gt       lt option value  Male  gt Male lt  option gt       lt option value  Female  gt Female lt  option gt       lt  -- 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  -- gt     lt  select gt     lt input class  data-list-input  style  width 160px padding 4px 6px border-width 1px margin 0   type  text  name  sex  required  required  value    gt   lt  div gt    JS   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                  CSS   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      Any comments for improvement on my implementation welcome   Hope someone finds this helpful

User · Answer

I like jQuery Token input  Actually prefer the UI over some of the other options mentioned above   http   loopj com jquery-tokeninput   Also see  http   railscasts com episodes 258-token-fields for an explanation

[html] Drop Down Menu/Text Field in one

Examples related to html

Examples related to html-select

Examples related to html-input