Datalist weird behaviour

Question

Here are two different datalist one with patient filenumber other with state

<input type="list" class="form-control" name="patient" list="patient-list" placeholder="Enter Patient file number">
          <datalist id="patient-list">
            <option value='49'>pc123</option>
            <option value='48'>pc162</option>
            <option value='47'>pc183</option>
            <option value='45'>pc193</option>
          </datalist>

<input type="list" class="form-control" name="state" list="state-list" placeholder="Enter state">
          <datalist id="state-list">
            <option value='delhi'>delhi</option>
            <option value='mumbai'>mumbai</option>
            <option value='Haryana'>Haryana</option>
            <option value='Gurgaon'>Gurgaon</option>
          </datalist>

When you open drop down menu for both you will notice input for patient show value & innerHTML both and inverted(on clicking it enters value inside input field). And in State input it just simply show state

What's the reason of these different behaviors? I want to input to show just innerHTML of option like state input and have different data in value & innerHTML

Answer 1

While I cannot answer your exact question, I.E. "What is the reason of this", I can tell you why it happens.

As a result of the intended functionality of the program running the code (whichever web browser you're running) the .innerHTML attribute is shown to the right of the option element only if the .innerHTML value and the .value value differ.

Here is a fiddle showing this in action, I've changed the first option to have the same .innerHTML value and .value value as an example: https://jsfiddle.net/87h3bcwd/

Further Reading on the Datalist Element that I found useful in answering this question: http://www.w3.org/TR/html5/forms.html#the-datalist-element

Code:

<input type="list" class="form-control" name="patient" list="patient-list" placeholder="Enter Patient file number">
          <datalist id="patient-list">
            <option value='49'>49</option>
            <option value='48'>pc162</option>
            <option value='47'>pc183</option>
            <option value='45'>pc193</option>
          </datalist>

<input type="list" class="form-control" name="state" list="state-list" placeholder="Enter state">
          <datalist id="state-list">
            <option value='delhi'>delhi</option>
            <option value='mumbai'>mumbai</option>
            <option value='Haryana'>Haryana</option>
            <option value='Gurgaon'>Gurgaon</option>
          </datalist>

Answer 2

Using <datalist> doesn't work like <select>. It always displays the value attribute and doesn't let you change it by default. This answer shows how to display different text if you need to - it consists of using a data- attribute and processing it with JavaScript:

Show datalist labels but submit the actual value