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

Problem:

01

Resolution: ( Converting simple dropdown list to searchable )

02

Add following CSS link in the page:

[code]
<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" />

[/code]
Add Following script link in page:
[code]
<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>

[/code]

To change any dropdown list to searchable dropdown list:

Add “chosen-select” class to dropdown control.

[code language=”html”]
<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>

[/code] 

Necessary css and js file: Download

More details: Click Here !!

By Rijwan Ansari

MVP, CSM, CSPO, MCP, MCTS. Sr. Software Developer. Expertise in ASP.NET MVC, Angular, AngularJs, .Net Core, C#.NET, Azure, Cognitive Services, Machine Learning, SharePoint, Azure Services, and tools, Requirement Analysis, Team Management, Pre-Sales and more. Ability to work independently and Team, handle pressure and meet commitment. Excellence Communication and adjust in any environment

2 thoughts on “Searchable Dropdown in SharePoint /ASP.NET”

Leave a Reply

Your email address will not be published. Required fields are marked *