Filter Auto Suggestion Option in Dropdown List View ASP .NET

Sangeetha S
3w
994
0
3

Article

This article will explain about getting auto suggestion from Dropdown list view with filtering option in ASP .Net. For Dropdown view asp:DropDownList tag will be used and load the data from script side. With help of javascript 'onkeyup' events will get the dropdown view suggestion at client end. Example Markup page with javascript code below.

Markup page

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server"><main>
    <script type="text/javascript">
        function filterDropdown() {
            var input, filter, dropdown, options, i;
            input = document.getElementById("txtSearch");
            filter = input.value.toUpperCase();
            dropdown = document.getElementById("<%= ddlOptions.ClientID %>");
             options = dropdown.getElementsByTagName("option");
             for (i = 0; i < options.length; i++) {
                 if (options[i].textContent.toUpperCase().indexOf(filter) > -1) {
                     options[i].style.display = "";
                 } else {
                     options[i].style.display = "none";
                 }
             }
         }
    </script>
            <div>
            <label for="txtSearch">Search:</label>
                <input type="text" id="txtSearch" onkeyup="filterDropdown()" placeholder="Search options..." />
            <asp:DropDownList ID="ddlOptions" runat="server">
                <asp:ListItem Text="Option" Value="Select"></asp:ListItem>
                <asp:ListItem Text="Option 1" Value="1"></asp:ListItem>
                <asp:ListItem Text="Option 2" Value="2"></asp:ListItem>
                <asp:ListItem Text="Option 3" Value="3"></asp:ListItem>
                <asp:ListItem Text="Option 4" Value="4"></asp:ListItem>


            </asp:DropDownList></div>

    </main>
</asp:Content>

Server end page

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    ' No server-side logic needed for this example.
    If Not IsPostBack Then
        ddlOptions.Items.Clear()
        ddlOptions.Items.Add(New ListItem("aaa", "1"))
        ddlOptions.Items.Add(New ListItem("bbb 2", "2"))
        ddlOptions.Items.Add(New ListItem("ccc 3", "3"))
        ddlOptions.Items.Add(New ListItem("dd 4", "4"))
    End If
End Sub