为什么.change()不适用于datalist元素？还有其他选择吗？

Question

我已经对该主题进行了一些谷歌搜索,但由于浏览器对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>

每个选项都应链接到我在其中添加的data-attr属性中的页面.如果有一种更简单的方法可以将这些选项链接到页面,我只是不知道它.这是我第一次尝试使用datalist元素做任何事情.如果我只是从根本上做错了,那么随意带我去学校.

目前,我正试图在下拉列表更改时触发.我认为jQuery的.change()事件会处理它,但事实并非如此.无论如何,我正在测试事件,看它是否触发了这个:

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

没有骰子.

有关在选项列表更改时将此元素链接到这些页面的任何建议吗？

Answer 1

如果您希望在选择了datalist选项时触发事件,而不是等到change事件(当选择了新选项并将焦点放在另一个元素时触发),您应该绑定到input事件,如所以:

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

jsFiddle演示 | 另请参阅"oninput"的 MDN文档