Can HTML5 datalist differentiate value and option text?

Question

The list attribute / datalist element of HTML5 forms shows a dropdown menu of choices one can pick from, edit, and even type in some text. All this can be achieved at once with a clean and powerful code:

<input list="states">
<datalist id="states">
    <option value="One">
    <option value="Two">
</datalist>

However, how to make such a form send a value which is different from the option text, as in the usual select / option (below)?

<select>
    <option value="1">One</option>
    <option value="2">Two</option>
</select>

I think you cannot do this with one input only. It is achievable with one input for the displayed text, and the second one, hidden which would contain the IDs. That, plus some script to syncronize them. — SWilk, Oct 25 '13 at 07:13
possible duplicate of [Show datalist labels but submit the actual value](http://stackoverflow.com/questions/29882361/show-datalist-labels-but-submit-the-actual-value) — Stephan Muller, Apr 29 '15 at 16:36

score 5 · Answer 1 · answered Oct 25 '13 at 07:04

5

Seems you can't with pure HTML without using some JS+CSS help.

try this i hope its help you.

html

<input id="datalisttestinput" list="stuff" ></input>
        <datalist id="stuff">
            <option id="3" value="Collin" >
            <option id="5" value="Carl">
            <option id="1" value="Amy" >
            <option id="2" value="Kristal">
        </datalist>

script

function GetValue() {
            var x = $('#datalisttestinput').val();
            var z = $('#stuff');
            var val = $(z).find('option[value="' + x + '"]');
            var endval = val.attr('id');
            alert(endval);
        }

Best Wishes Kumar

answered Oct 25 '13 at 07:04

Kumar Shanmugam

597
1
11
40

2

You have clearly used some library here, so please state which one. Also, @Alex asked how to make the form send identifier of the selected list value. So I think your script should modify the element, or add hidden element which would contain the id. – SWilk Oct 25 '13 at 07:12
yes your right i could add hidden element post the contain id only. its work like usual select option. – Kumar Shanmugam Oct 25 '13 at 07:36
3

Kumar, seems like credit to @infocyde should be in your notes somewhere as your solution looks like a cut and paste of his answer here: http://stackoverflow.com/questions/14532398/html5-datalist-value-vs-inner-text?rq=1 – globalSchmidt Mar 21 '14 at 20:07
1

I voted up. I extended the functionality a little: If the evaluated id is blank, then the user definitely entered a new value, I'll use this to create a NEW entry into the existing list (where I fetched the original list from) [on the server side]. – Peter Aug 11 '14 at 08:17
before safari implements (html5??), it needs to have "value" attribute store the value, and "label" be the label, not mix them both into the dropdown row. "label" attribute should be the only visible HTML, not the hash for it as well. without this feature, you have the display the value -- readable off model -- along with the label. for example "My title 1", or "awfj23@#$" (which corresponds to My title 1 in some hash table). like why do you want your user to know what the unique id is – neaumusic Nov 22 '14 at 08:22

score 1 · Answer 2 · answered Oct 13 '14 at 05:52

Below is Kumah's modified answer that uses a hidden field to contain the value which ultimately gets sent to the server.

$('#inputStates').change(function(){
    var c =  $('#inputStates').val();
    $('#inputStates').val(getTextValue());
    $('#statesHidden').val(c);
});

function getTextValue(){
  var val =  $('#inputStates').val();
  var states = $('#states');
  var endVal = $(states).find('option[value="' + val + '"]');
  //depending on your logic, if endVal is empty it means the value wasn't found in the datalist, you can take some action here
  return endVal.text();
}

Can HTML5 datalist differentiate value and option text?

2 Answers2

Linked