jQuery event for HTML5 datalist when item is selected or typed input match with item in the list

Question

On modern browsers, you can use input event, e.g:

$("#name").on('input', function () {
    var val = this.value;
    if($('#allNames option').filter(function(){
        return this.value.toUpperCase() === val.toUpperCase();        
    }).length) {
        //send ajax request
        alert(this.value);
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<input id="name" list="allNames" />
<datalist id="allNames">
    <option value="Adnan1" />
    <option value="Faizan2" />
</datalist>

PS: as input event has better support than datalist element, there is indeed no reason to not use it if you are already using datalist element.

Leave a Comment Cancel reply