html5数据列表选项上的事件单击

Question

I need a datalist with my html5 input, and I want to create another event when the user click on one option of the datalist. I tried but it doesn't work :(

Here is a part of my code :

    <input name="adresse" type="text" id="formadresse" list="listadresses">
<datalist id="listadresses">
<option class="adresseoption" data-placeid="ChIJjwkhBaY_5kcRlWs1lhSC4tw" value="Louvres, France"></option>
<option class="adresseoption" data-placeid="ChIJD3uTd9hx5kcR1IQvGfr8dbk" value="Louvre Museum, Rue de Rivoli, Paris, France"></option>
<option class="adresseoption" data-placeid="ChIJ5V8P_KM_5kcRDQeUoTCtQ7U" value="Louvres, France"></option>
</datalist>

Whatever the jquery code i try, i fail into create the simplest result as an alert().

I have no exception thrown, the events I try to activate aren't recognized.

Thank you for your help !

Answer 1

You can catch an event by watching the input event on your input with jQuery. This event will be trigger when the user change what is in the input and click on an item in your datalist.

$(document).ready(function(){
    $("#formadresse").on('input',function() {
        alert($(this).val());
    });
})

Working fiddle

Unfortunately as said here , there is no many possibilities with datalist...