Quantcast
Channel: Internet Explorer Web Development forum
Viewing all articles
Browse latest Browse all 3527

Trouble with Datalist autopopulate in IE11

$
0
0

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.


Viewing all articles
Browse latest Browse all 3527

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>