Obtenir datalist options dans IE9 avec JavaScript

Ce code fonctionne dans tous les principaux navigateurs, sauf Internet Explorer 9. Je ne comprends pas ce que je fais mal, c'est probablement quelque chose de simple que je suis absent.

Copiez ce code (ou utilisez cette jsFiddle) pour voir le problème dans 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>

Je voudrais qu'il soit comme la croix-navigateur que possible à la fin.

InformationsquelleAutor Timo Huovinen | 2012-09-12

9

IE 9 ignore option des éléments qui ne sont pas les enfants directs d'un select élément (ou d'un optgroup dans un délai d'un). Une solution simple consiste à envelopper votre option éléments cachés select élément en utilisant les commentaires conditionnels:
```
<datalist id="languages">

<option value="Arabic">
...

</datalist>
```
Voici un jsFiddle démo de cette approche.

2017 mise à Jour: Il est intéressant de noter qu'à partir de juillet 2017 Safari sur iOS & Mac n'a pas encore ajout du support pour <datalist> éléments. OP demandé de trouver une solution qui fonctionne va tous les principaux navigateurs, donc ce n'est probablement pas la meilleure solution à cet effet.

Plus d'infos ici: http://caniuse.com/#search=datalist
- Je n'ai pas essayé, mais il semble comme une solution valable
- La bonne chose à ce sujet est qu'il fonctionne sans déclassement IE 9 utilisateurs plus âgés, cruddier moteur de rendu. Il y a quelques améliorations majeures entre 8 et 9; il ne vaut pas la peine de perdre tous juste un petit bug de ce genre. 🙂
- Je suis absolument d'accord
- Cela a fonctionné pour moi. Merci beaucoup.
- Pour quelque raison que ce code ne fonctionne pas pour moi. Même le jsFiddle démo ne fonctionne pas dans IE9
- Aw, qui suce—merci de prendre le temps d'en faire rapport, si! Pourriez-vous nous dire comment vous faites des tests afin que je puisse essayer de reproduire le problème? Êtes-vous de l'utilisation d'IE 9, directement ou quelque chose comme IETester/modifier le mode de document dans une version ultérieure? Et vous allez directement à la jsFiddle, ou êtes-vous visiter les résultats de l'image?
- Directement sur IE9. J'ai d'abord ouvert jsFiddle et a essayé de le tester mais il n'a pas de travail, ensuite essayé d'ajouter le code à ma demande et reste encore pas de chance... Puis fini par faire un peu plus de recherche, et c'est ce qui a fini par travailler pour moi (affichée comme réponse). Ma version de IE est: 9.0.8112.16421.
- Grâce Kremena! Assurez-vous que nous parlons de la même chose, tu veux dire que la datalist n'est pas autocompleting dans IE, ou que les options des éléments qui ne sont même pas apparaître dans les DOM lorsque vous inspectez l'élément avec les outils de dev? Vérifier simplement que mon exemple était seulement pour montrer comment obtenir les éléments à afficher dans les DOM—le datalist ne sera pas réellement travail sans un polyfill! 🙂
- que peut-être elle. J'ai été en mesure de voir les éléments dans le DOM, mais ils n'ont toujours pas sur la datalist dans IE. Merci pour votre aide car vous exemple m'a fait un pas en avant dans ma recherche.
InformationsquelleAutor Jordan Gray

Pour une raison quelconque, la solution proposée ne fonctionne pas pour moi. Au lieu de cela j'ai utilisé jQuery UI autocomplete méthode et Modernizr pour vérifier si le navigateur prend en charge.

J'ai fini à l'aide de ce code javascript:

 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();
}

Pour le code HTML suivant:

<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>

Utilisé les méthodes suivantes de Microsoft poste de référence: http://msdn.microsoft.com/en-us/magazine/dn133614.aspx

InformationsquelleAutor Kremena Lalova

-1

Vous avez besoin d'ajouter un élément meta définir le mode de compatibilité du contenu de IE8, et aussi, permettre le mannequin-élément de création en ligne - c'est nécessaire.

Donc, votre <head> devrait maintenant ressembler à ceci:
```
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=8"> 
<title>Datalist fetching in IE9</title>
<script type="text/javascript">
document.createElement('datalist');          //IMPORTANT AS WELL
window.onload = function() {
alert(document.getElementById('languages').getElementsByTagName('option').length);//should alert 42
};
</script>
```
- Il fonctionne! Merci!!!! C'est ridicule que chaque version d'internet explorer a sa propre liste de corrections et de hacks.
- Permanence de l'accrochage toutes les futures versions d'IE à l'ancienne IE 8 mode de rendu est un très émoussé solution; compte tenu de l'importance des améliorations que IE 9 et les versions ultérieures apporter, je ne le recommande pas en général.
InformationsquelleAutor Debloper

Vous devez vous connecter pour publier un commentaire.