datalist change event

datalist-input-event.html

<input type="text" id="input" list="datalist">

<datalist id="datalist">
   <option>Foo</option>
   <option>Bar</option>
   <option>Baz</option>
   <option>Foo Bar</option>
   <option>Bar Baz</option>
</datalist>

<script>
function qs(query, context) {
   return (context || document).querySelector(query);
}

function qsa(query, context) {
   return (context || document).querySelectorAll(query);
}
  
var timerDataList = {};

qs("#input").addEventListener('input', function (e) {
     var listAttr = e.target.getAttribute('list');
     
     if (timerDataList[listAttr]) clearTimeout();
  
     timerDataList[listAttr] = setTimeout(executeCheckin, 100, e.target, listAttr);
});
  
function executeCheckin(target, listAttr) {

    var options = qsa( 'option', qs('#' + listAttr) ),
        values = [];
    
    [].forEach.call(options, function (option) {
        values.push(option.value)
    });

    var currentValue = target.value;

    if (values.indexOf(currentValue) !== -1) {
         console.log('evento "change" %s', currentValue);
    }

});
</script>

datalist-with-context.html

<input type="text" id="input" list="datalist">

<datalist id="datalist">
   <option>Foo</option>
   <option>Bar</option>
   <option>Baz</option>
   <option>Foo Bar</option>
   <option>Bar Baz</option>
</datalist>

<script>
function qs(query, context) {
   return (context || document).querySelector(query);
}

function qsa(query, context) {
   return (context || document).querySelectorAll(query);
}

qs("#input").addEventListener('change', function (e) {

    var options = qsa( 'option', qs('#' + e.target.getAttribute('list')) ),
        values = [];
    
    [].forEach.call(options, function (option) {
        values.push(option.value)
    });

    var currentValue = e.target.value;

    if (values.indexOf(currentValue) !== -1) {
         console.log('evento "change" %s', currentValue);
    }

});
</script>

datalist-without-context.html

<input type="text" id="input" list="datalist">

<datalist id="datalist">
   <option>Foo</option>
   <option>Bar</option>
   <option>Baz</option>
   <option>Foo Bar</option>
   <option>Bar Baz</option>
</datalist>

<script>
function qs(query, context) {
   return (context || document).querySelector(query);
}

function qsa(query, context) {
   return (context || document).querySelectorAll(query);
}

qs("#input").addEventListener('change', function (e) {

    var options = qsa('#' + e.target.getAttribute('list') + ' > option'),
        values = [];
    
    [].forEach.call(options, function (option) {
        values.push(option.value)
    });

    var currentValue = e.target.value;

    if (values.indexOf(currentValue) !== -1) {
         console.log('evento "change" %s', currentValue);
    }

});
</script>