Searchable Dropdown in SharePoint /ASP.NET

As we know that default dropdown list is not searchable. Simple way to create searchable in asp.net/SharePoint solution.

Problem:

Resolution: ( Converting simple dropdown list to searchable )

Add following CSS link in the page:

    <link href="Content/choosen/docsupport/style.css" rel="stylesheet" />
    <link href="Content/choosen/docsupport/prism.css" rel="stylesheet" />
    <link href="Content/choosen/chosen.css" rel="stylesheet" />

Add Following script link in page:

  <script src="Scripts/jquery-1.10.2.js"></script>
  <script src="Content/choosen/chosen.jquery.min.js"></script>
  <script src="Content/choosen/docsupport/prism.js"></script>
  <script src="Content/choosen/docsupport/init.js"></script>

To change any dropdown list to searchable dropdown list:

Add “chosen-select” class to dropdown control.

   <div>
  <asp:DropDownList ID="ddltest" class="chosen-select form-control" data-placeholder="Choose a Country..."   runat="server">
                                <asp:ListItem></asp:ListItem>
                                <asp:ListItem>rijwan</asp:ListItem>
                                <asp:ListItem>satya</asp:ListItem>
                                <asp:ListItem>test</asp:ListItem>
                                <asp:ListItem>VS</asp:ListItem>
                                <asp:ListItem>OAD</asp:ListItem>
                                <asp:ListItem>ASD</asp:ListItem>
                                <asp:ListItem>My Request</asp:ListItem>
                                <asp:ListItem>reports</asp:ListItem>
                            </asp:DropDownList>
                        </div>

 

Necessary css and js file: Download

More details: Click Here !!