Hello,
I have an input tag associated with a datalist which has few options. I am working on filtering the datalist which should populate with the text user enters into the input field. However i get the list only if the user types the starting letters of the texts in the datalist options. I would like the datalist to be filtered depending on any text he enters and not only the starting letters. The code works in Chrome and Firefox, but i require it to be working on IE.
My code:
<html>
<head>
<title>My test widget</title>
<meta charset="utf-8" />
<script type='text/javascript'>
function onFruitClick() {
var input, filter, datalistFruit, i;
input = document.getElementById("Search");
filter = input.value.toUpperCase();
datalistFruit = document.getElementById("Fruit");
for (i = 0; i < datalistFruit.options.length; i++) {
if (datalistFruit.options[i].contains(filter)) {
datalistFruit.options[i].style.display = "";
} else {
datalistFruit.options[i].style.display = "none";
}
}
}
</script>
</head>
<body>
<div id="myFirstWidget">
<input list="Fruit" name="Search" id="Search" title="Search" onkeyup="onFruitClick()" >
<datalist name="Fruit" id="Fruit">
<option>apple</option>
<option>pineapple</option>
<option>mango</option>
<option>grape</option>
</datalist>
</div>
</body>
</html>
So to be more precise i want the datalist to be populated with 'apple', 'pineapple' and 'grape' when user types 'ap' in the input as of now i get only 'apple' when i type 'ap'.Any help is appreciated.
Thanks.