Example of getting value from datalist but showing in input another.

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="style.css" />
    <script data-require="jquery" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="script.js"></script>
  </head>

  <body>
    <input id="txtBrowser" list="browsers" name="browser" />
    <datalist id="browsers">
      <option value="1">Internet Explorer</option>
      <option value="2">Firefox</option>
      <option value="3">Chrome</option>
      <option value="4">Opera</option>
      <option value="5">Safari</option>
    </datalist>
    <button id="btnShowResult">Mostrar resultado</button>
    <br />
    <span id="spnResult"></span>
  </body>

</html>

$(document).ready(function() {

  $('#btnShowResult').click(function(){
    //Obtengo el id del data value
    var idValue = $('#txtBrowser').prop("data-value")
    
    //Lo muestro en un span
    $('#spnResult').text(idValue);
  });
  
  
  $("#txtBrowser").bind('input', function () {
    //Obtengo el identificador que automaticamente el 
    //data list pone en el input
    var dataImputBefore = $("#txtBrowser").val();
    
    //Lo seteo en un atributo del input para usarlo mas tarde
    $("#txtBrowser").prop('data-value',dataImputBefore);
    
    //Busco en el datalist el option correspondiente al id que se obtuvo
    var elementOption = $("#browsers option[value='"+dataImputBefore+"']")
    
    //Como ya guarde el id en una propiedad data-value del input
    //ya puedo poner el valor que quiero mostrar realmente en el input
    //este valor lo obtengo del option que encontre en el paso anterior.
    //Lo tengo en la propiedad text
    $("#txtBrowser").val(elementOption.text());
  });
  
});

/* Put your css in here */

h1 {
  color: red;
}