How to display the text in the datalist and not its value?

Navigation
2

I made a coupled autocomplete in a input field without much difficulty, as shown below: 

<label>Professor</label>
<input type="text" list="list-professor" name="professor_id">
<datalist id="list-professor">
   <select>
      <option value="1">Roberto</option>
      <option value="2">Rosana</option>
      <option value="3">Romualdo</option>
   </select>
</datalist>

The datalist always returns the value contained in the value attribute.

I would like to autocomplete input type text with Person Name, but did not want to lose ID when submitting the form.

I thought of trying to assign the value of ID's to a field of type hidden , but I do not know how to assign the value when there is selection in datalist .

    
asked by anonymous 11.08.2017 / 16:05

1 answer

4

I understand that you want to send id and the input displays the teacher's name.

I made a small change to your HTML , in% with% add the names of Teachers , and in% with% I put value . 

$(document).ready(function() {
    $('button').click(function() {
        var value = $('input').val();
        console.log($('#list-professor [value="' + value + '"]').data('value'));
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><label>Professor</label><inputtype="text" list="list-professor" name="professor_id">
<datalist id="list-professor">
   <select>
      <option data-value="1" value="Roberto"></option>
      <option data-value="2" value="Rosana"></option>
      <option data-value="3" value="Romualdo"></option>
   </select>
</datalist>
<button>Enviar</button>

I recommend reading:

11.08.2017 / 16:33
treatment of multiple promisses in angular I can not clone repository with git bash