Show datalist labels but submit the actual value

Question

Currently the HTML5  lt datalist gt  element is supported in most major browsers  except Safari  and seems like an interesting way to add suggestions to an input   However  there seem to be some discrepancies between the implementation of the value attribute and the inner text on the  lt option gt   For example    lt input list  answers  name  answer  gt   lt datalist id  answers  gt     lt option value  42  gt The answer lt  option gt   lt  datalist gt    This is handled differently by different browsers   Chrome and Opera    FireFox and IE 11    After selecting one  the input is filled with the value and not the inner text  I only want the user to see the text   The answer   in the dropdown and in the input  but pass the value 42 on submit  like a select would   How can I make all browsers have the dropdown list show the labels  inner text  of the  lt option gt s  but send the value attribute when the form is submitted

User · Accepted Answer

Note that datalist is not the same as a select  It allows users to enter a custom value that is not in the list  and it would be impossible to fetch an alternate value for such input without defining it first  Possible ways to handle user input are to submit the entered value as is  submit a blank value  or prevent submitting  This answer handles only the first two options  If you want to disallow user input entirely  maybe select would be a better choice   To show only the text value of the option in the dropdown  we use the inner text for it and leave out the value attribute  The actual value that we want to send along is stored in a custom data-value attribute  To submit this data-value we have to use an  lt input type  quot hidden quot  gt   In this case we leave out the name  quot answer quot  on the regular input and move it to the hidden copy   lt input list  quot suggestionList quot  id  quot answerInput quot  gt   lt datalist id  quot suggestionList quot  gt       lt option data-value  quot 42 quot  gt The answer lt  option gt   lt  datalist gt   lt input type  quot hidden quot  name  quot answer quot  id  quot answerInput-hidden quot  gt   This way  when the text in the original input changes we can use javascript to check if the text also present in the datalist and fetch its data-value  That value is inserted into the hidden input and submitted  document querySelector  input list    addEventListener  input   function e        var input   e target          list   input getAttribute  list            options   document querySelectorAll       list     option            hiddenInput   document getElementById input getAttribute  id      -hidden            inputValue   input value       hiddenInput value   inputValue       for var i   0  i  lt  options length  i              var option   options i            if option innerText     inputValue                hiddenInput value   option getAttribute  data-value                break                        The id answer and answer-hidden on the regular and hidden input are needed for the script to know which input belongs to which hidden version  This way it s possible to have multiple inputs on the same page with one or more datalists providing suggestions  Any user input is submitted as is  To submit an empty value when the user input is not present in the datalist  change hiddenInput value   inputValue to hiddenInput value    quot  quot   Working jsFiddle examples  plain javascript and jQuery

User · Answer

I realize this may be a bit late  but I stumbled upon this and was wondering how to handle situations with multiple identical values  but different keys  as per bigbearzhu s comment    So I modified Stephan Muller s answer slightly   A datalist with non-unique values     lt input list  answers  name  answer  id  answerInput  gt   lt datalist id  answers  gt     lt option value  42  gt The answer lt  option gt     lt option value  43  gt The answer lt  option gt     lt option value  44  gt Another Answer lt  option gt   lt  datalist gt   lt input type  hidden  name  answer  id  answerInput-hidden  gt    When the user selects an option  the browser replaces input value with the value of the datalist option instead of the innerText    The following code then checks for an option with that value  pushes that into the hidden field and replaces the input value with the innerText   document querySelector   answerInput   addEventListener  input   function e        var input   e target             list   input getAttribute  list            options   document querySelectorAll       list     option value    input value                hiddenInput   document getElementById input getAttribute  id      -hidden         if  options length  gt  0          hiddenInput value   input value        input value   options 0  innerText                 As a consequence the user sees whatever the option s innerText says  but the unique id from option value is available upon form submit  Demo jsFiddle

User · Answer

The solution I use is the following    lt input list  answers  id  answer  gt   lt datalist id  answers  gt     lt option data-value  42  value  The answer  gt   lt  datalist gt    Then access the value to be sent to the server using JavaScript like this   var shownVal   document getElementById  answer   value  var value2send   document querySelector   answers option value    shownVal       dataset value     Hope it helps

User · Answer

Using PHP i ve found a quite simple way to do this  Guys  Just Use something like this   lt input list  customers  name  customer id  required class  form-control  placeholder  Customer Name  gt               lt datalist id  customers  gt                   lt  php       querySnamex    SELECT   FROM  customer  WHERE fname     AND lname     order by customer id ASC        resultSnamex   mysqli query  con  querySnamex  or die mysql error                      while   row this   mysqli fetch array  resultSnamex                         echo   lt option data-value     row this  customer id      gt    row this  fname        row this  lname     lt  option gt                       lt input type  hidden  name  customer id real  value     row this  customer id      id  answerInput-hidden  gt                                          gt               lt  datalist gt    The Code Above lets the form carry the id of the option also selected

User · Answer

When clicking on the button for search you can find it without a loop  Just add to the option an attribute with the value you need  like id  and search for it specific       search wrapper button   on  click   function    console log    option value          autocomplete input   val          data  value

[javascript] Show datalist labels but submit the actual value

Examples related to javascript

Examples related to html

Examples related to cross-browser

Examples related to html-datalist