Recuperare il valore dell'elemento selezionato da una dataList

L'elemento HTML5 chiamato dataList è utilizzato per fornire valori preimpostati da associare come scelta ad un campo di input. Questo significa anche che tale elemento non è una select e per questo motivo il recupero del valore, in Javascript, dell'opzione selezionata non segue gli stessi principi solitamente utilizzati in caso di dropdown o combobox.
Nell'esempio seguente mostro una possibilità di recupero del valore dell'opzione selezionata, in puro Javascript, così da poterlo gestire a runtime e procedere con eventuali operazioni (ad esempio la visualizzazione di particolari campi in base alla selezione effettuata dall'utente) per raggiungere il risultato desiderato. Nel caso specifico, sapendo che il valore dell'opzione selezionata diventerà automaticamente quello dell'elemento di input, lo vado a recuperare dall'attributo value di quest'ultimo.
Se invece volessimo recuperare un altro eventuale attributo presente nell'opzione selezionata (ad esempio data), ua soluzione potrebbe essere quella di recuperare il valore come appena spiegato, dopodichè effettuare un ciclo sulle option dell'elemento dataList, di nostro interesse recuperabile tramite il suo id, e andare a prendere il contenuto dell'attributo di interesse laddove il valore dell'option corrisponda a quello del campo di input.

Con il codice seguente selezionando un'opzione questa apparirà oltre che, come di consueto, nel campo di input anche nell'elemento di tipo span con id "result":

Codice HTML:

<input list="myDatalist" id="myDatalist-input">
<datalist id="myDatalist">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>
<br /><br />
<div id="result"></div>

Codice Javascript:

document.getElementById('myDatalist-input').addEventListener('input', function () {
  var element_selected = document.getElementById('myDatalist-input').value;
  document.getElementById('result').innerHTML = "Hai selezionato l'opzione: " + element_selected;
});

Se volete testare live il codice appena esposto potete fare fede a questo JSFiddle nel quale ho riportato fedelmente l'esempio: