locked
Search in Dropdownlist RRS feed

  • Question

  • User564383478 posted

    Hi All,

    In the below dropdown list, Is it possible to search the items without text box? I need to enter the letters in the dropdown list itself.How it possible to do so?

    <%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    <script type = "text/javascript">
        var ddlText, ddlValue, ddl, lblMesg;
        function CacheItems() {
            ddlText = new Array();
            ddlValue = new Array();
            ddl = document.getElementById("<%=ddlItems.ClientID %>");
            lblMesg = document.getElementById("<%=lblMessage.ClientID%>");
            for (var i = 0; i < ddl.options.length; i++) {
                ddlText[ddlText.length] = ddl.options[i].text;
                ddlValue[ddlValue.length] = ddl.options[i].value;
            }
        }
        window.onload = CacheItems;
        
        function FilterItems(value) {
            ddl.options.length = 0;
            for (var i = 0; i < ddlText.length; i++) {
                if (ddlText[i].toLowerCase().indexOf(value) != -1) {
                    AddItem(ddlText[i], ddlValue[i]);
                }
            }
            lblMesg.innerHTML = ddl.options.length + " item(s) found.";
            if (ddl.options.length == 0) {
                AddItem("No item found.", "");
            }
        }
        
        function AddItem(text, value) {
            var opt = document.createElement("option");
            opt.text = text;
            opt.value = value;
            ddl.options.add(opt);
        }
    </script>
    <style type = "text/css">
        body
        {
            font-family:Arial;
            font-size:10pt
        }
    </style>
    </head>
    <body>
        <form id="form1" runat="server">
    <div>
        <asp:TextBox ID="txtSearch" runat="server" 
             onkeyup = "FilterItems(this.value)"></asp:TextBox><br />
        <asp:DropDownList ID="ddlItems" runat="server" >
            <asp:ListItem Text="Mango" Value="1"></asp:ListItem>
            <asp:ListItem Text="Orange" Value="2"></asp:ListItem>
            <asp:ListItem Text="Apple" Value="3"></asp:ListItem>
            <asp:ListItem Text="Banana" Value="4"></asp:ListItem>
            <asp:ListItem Text="Water Melon" Value="5"></asp:ListItem>
            <asp:ListItem Text="Lemon" Value="6"></asp:ListItem>
            <asp:ListItem Text="Pineapple" Value="7"></asp:ListItem>
            <asp:ListItem Text="Papaya" Value="8"></asp:ListItem>
            <asp:ListItem Text="Chickoo" Value="9"></asp:ListItem>
            <asp:ListItem Text="Apricot" Value="10"></asp:ListItem>
            <asp:ListItem Text="Grapes" Value="11"></asp:ListItem>
            <asp:ListItem Text="Olive" Value="12"></asp:ListItem>
            <asp:ListItem Text="Guava" Value="13"></asp:ListItem>
            <asp:ListItem Text="Sweet Lime" Value="14"></asp:ListItem>
        </asp:DropDownList>
        <br />
        <asp:Label ID="lblMessage" runat="server" Text=""></asp:Label>
    </div>
        </form>
    </body>
    </html>
    

    Wednesday, May 25, 2016 8:02 AM

Answers

All replies