Search code examples
jqueryhtmlhtml-datalist

Why does .change() not work on the datalist element? Is there an alternative?

I've done a bit of googling on the topic but since browser support for the datalist element is still pretty poor, it seems like no one is using it or hasn't really asked this question before. I have a datalist:

<form>

     <input placeholder="Enter a location or choose from the list" list="restaurants" id="hp-restaurants">

     <datalist id="restaurants">
         <option value="Sanford, ME" data-attr="<?php echo site_url(); ?>/locations/weathervane-restaurants/sanford/" />
         <option value="Kitery, ME" data-attr="<?php echo site_url(); ?>/locations/weathervane-restaurants/kittery/" />
         <option value="Belfast, ME" data-attr="<?php echo site_url(); ?>/locations/lobster-in-the-rough/belfast/" />
         <option value="Waterville, ME" data-attr="<?php echo site_url(); ?>/locations/weathervane-restaurants/waterville/" />
         <option value="Brewer, ME" data-attr="<?php echo site_url(); ?>/locations/weathervane-restaurants/brewer/" />
         <option value="South Portland, ME" data-attr="<?php echo site_url(); ?>/locations/weathervane-restaurants/south-portland/" />
         <option value="Bedford, NH" data-attr="<?php echo site_url(); ?>/locations/weathervane-restaurants/bedford-nh/" />
         <option value="Dover, NH" data-attr="<?php echo site_url(); ?>/locations/weathervane-restaurants/dover-nh/" />
         <option value="Chichester, NH" data-attr="<?php echo site_url(); ?>/locations/weathervane-restaurants/chichester-nh/" />
         <option value="Salem, NH" data-attr="<?php echo site_url(); ?>/locations/weathervane-restaurants/salem-nh/" />
         <option value="West Lebanon, NH" data-attr="<?php echo site_url(); ?>/locations/weathervane-restaurants/west-lebanon-nh/" />
         <option value="Nashua, NH" data-attr="<?php echo site_url(); ?>/locations/weathervane-restaurants/nashua-nh/" />
     </datalist>

</form>

Each one of the options is supposed to link to the page in the data-attr attribute that I've added in there. If there's an easier way to get those options to link to pages, I'm just ignorant of it. This is the first time I'm attempting to do anything with the datalist element. So feel free to take me to school if I'm just doing this wrong in a fundamental way.

At the moment, I'm trying to trigger an even when the drop down list changes. I thought that jQuery's .change() event would handle that but it's not. Anyway, I'm testing the event to see if it triggers with this:

$('#hp-restaurants').click(function() {
    console.log('HELLO WORLD');
});

No dice.

Any advice on getting this element to link to those pages when the options list changes?

Solution

  • If you're looking to fire an event when a datalist option has been selected, rather than waiting until the change event (which is fired when a new option has been selected and focus is given to another element) you should bind to the input event, like so:

     $('#hp-restaurants').on('input', function () {
    console.log('Input has been changed.');
 });

    jsFiddle demo | See also MDN docs for 'oninput'