Search code examples
javascriptjqueryspreadsheetmodernizrdatalist

Modernizr.datalistelem returning false in safari browser

Hi I have created a html page. link Here data coming from spreadsheets.google.com. Here during load it displaying error. I found a javascript code there which is indicating that browser will not support. And for this reason my product list also not displaying in dropdown list.

if (!Modernizr.datalistelem) {
 alert('This browser does not support all Aherns app functionality - suggest using another browser');
}

This is modernizer link http://modernizr.com/download/#-input-shiv-cssclasses-addtest-elem_datalist-load

Here datalist Element is using for this purpose.

Solution

  • You are right, as you can read here, Safari doesn't support datalist, so you can only use Modernzr to switch to a polyfill

    for that HTML:

    <input class="destination-list" type="text" placeholder="From:" list="city">

    Modernizr.load({
  test: Modernizr.datalistelem,
  nope: ['js/jquery.js', 'js/jquery.datalist.js', 'js/load.datalist.js']
});

    where js/load.datalist.js contains:

    $('input[list]').datalist();

    Reference: http://www.hongkiat.com/blog/html5-datalist/