Menu
This code works in all major browsers except Internet Explorer 9. I don't understand what I'm doing wrong, it's probably something simple that I'm missing.
Copy this code (or use this jsFiddle) to see the problem in IE9:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Datalist fetching in IE9</title>
<script type="text/javascript">
//document.createElement('datalist');//this seems to fix it for IE6, but not for IE9
window.onload = function() {
alert(document.getElementById('languages').getElementsByTagName('option').length);//should alert 42
};
</script>
</head>
<body>
<form method="post">
<input name="language" type="text" value="English" list="languages" />
<datalist id="languages">
<option value="Arabic" />
<option value="Bengali" />
<option value="Bulgarian" />
<option value="Catalan" />
<option value="Chinese" />
<option value="Croatian" />
<option value="Czech" />
<option value="Danish" />
<option value="Dutch" />
<option value="English" />
<option value="Filipino" />
<option value="Finnish" />
<option value="French" />
<option value="German" />
<option value="Greek" />
<option value="Gujarati" />
<option value="Hebrew" />
<option value="Hindi" />
<option value="Hungarian" />
<option value="Indonesian" />
<option value="Italian" />
<option value="Japanese" />
<option value="Kannada" />
<option value="Korean" />
<option value="Latvian" />
<option value="Lithuanian" />
<option value="Malay" />
<option value="Malayalam" />
<option value="Marathi" />
<option value="Norwegian" />
<option value="Oriya" />
<option value="Persian" />
<option value="Polish" />
<option value="Portuguese" />
<option value="Romanian" />
<option value="Russian" />
<option value="Serbian" />
<option value="Slovak" />
<option value="Slovenian" />
<option value="Spanish" />
<option value="Swedish" />
<option value="Tamil" />
</datalist>
</form>
</body>
</html>
I would like it to be as cross browser as possible in the end.
236
IE 9 ignores option elements that aren't direct children of a select element (or an optgroup within one). A simple workaround is to wrap your option elements in a hidden select element using conditional comments:
<datalist id="languages">
<!--[if IE 9]><select disabled style="display:none"><![endif]-->
<option value="Arabic">
...
<!--[if IE 9]></select><![endif]-->
</datalist>
Here's a jsFiddle demo of this approach.
2017 Update: It's worth noting that as of July 2017 Safari on iOS & Mac still haven't added support for <datalist> elements. OP asked for a solution that works will all major browsers so this probably isn't the best solution to that effect.
More info here: http://caniuse.com/#search=datalist
155
For some reason the solution provided did not work for me. Instead I used jQuery UI's autocomplete method and Modernizr to verify whether the browser supports it.
I ended up using this javascript code:
var datalist, listAttribute, options = [];
if(!Modernizr.input.list)
{
$('input[type="text"][list]').each(function() {
listAttribute = $(this).attr('list');
datalist = $('#' + listAttribute);
if (datalist.length > 0) {
options = [];
datalist.find('option').each(function() {
options.push({ label: this.innerHTML, value: this.value });
});
$(this).autocomplete({
source: options
});
}
});
$('datalist').remove();
}
For the following HTML:
<div id="LocationSearch" class="col-xs-4 col-md-3">
<input type="text" name="locations" list="locations">
<datalist id="locations">
<select name="locations">
<option value="CD455">CD455</option>
<option value="CD455">CD455</option>
<option value="CD455">CD455</option>
</select>
</datalist>
</div>
Used the following Microsoft post as a reference: http://msdn.microsoft.com/en-us/magazine/dn133614.aspx
33
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
