Datalist not working in Safari

问题:

I made a simple auto suggest box using data list. It does not work in Safari. Is there any work around to it.

<input list="places" placeholder="Enter origin airport" />
<datalist id="places">
    <option value="Manchester Ringway Interantional">
    <option value="Chicago O'Hare Intl">
    <option value="Glasgow International">
    <option value="Edinburgh">
    <option value="Dubai International">
    <option value="New York JFK">
</datalist>

I will be using only these 6 airports. Is there any way to implement it so it works in Safari browser?

回答1:

Safari does not support datalist. You could use jQuery UI Autocomplete Instead. The code will be something like :

$(function() {
  var availableTags = [
  "ActionScript",
  "AppleScript",
  "Asp",
  ];
  $( "#tags" ).autocomplete({
    source: availableTags
  });
});

where #tags is the ID of your input element and availableTags the list of elements you need.

回答2:

you can try Select2 Plugin, it works with

IE 8+
Chrome 8+
Firefox 10+
Safari 3+
Opera 10.6+