Asp.net DropDownList with Filter option
Question
Is there way around i can add filter option with asp.net DropDownList control ? Like, user start typing in it and it narrow downs the list beneath accordingly.
<asp:DropDownList id="ColorList" runat="server">
<asp:ListItem Selected="True" Value="White"> White </asp:ListItem>
<asp:ListItem Value="Silver"> Silver </asp:ListItem>
<asp:ListItem Value="DarkGray"> Dark Gray </asp:ListItem>
<asp:ListItem Value="Khaki"> Khaki </asp:ListItem>
<asp:ListItemValue="DarkKhaki"> Dark Khaki </asp:ListItem>
</asp:DropDownList>
Thanks.. Anjum
Updated :
I have chosen JS but still not working for me, here is the code of my page :
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Chosen.aspx.vb" Inherits="Transactions_Chosen" %>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<link rel="stylesheet" href="../CSS/chosen.css" type="text/css" />
</head>
<body>
<select class="chosen-select" style="width:350px;" tabindex="2">
<option value=""></option>
<option value="United States">United States</option>
<option value="United Kingdom">United Kingdom</option>
<option value="Afghanistan">Afghanistan</option>
<option value="Lesotho">Lesotho</option>
<option value="Liberia">Liberia</option>
<option value="Pakistan">Pakistan</option>
<option value="Palau">Palau</option>
</select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script src="../JS/chosen.jquery.js" type="text/javascript"></script>
<script type="text/javascript">
var config = {
'.chosen-select' : {},
'.chosen-select-deselect' : {allow_single_deselect:true},
'.chosen-select-no-single' : {disable_search_threshold:10},
'.chosen-select-no-results': {no_results_text:'Oops, nothing found!'},
'.chosen-select-width' : {width:"95%"}
}
for (var selector in config) {
$(selector).chosen(config[selector]);
}
</script>
</body>
</html>
2 answers
solution1
1 2014-06-19 11:33:10
If chosen might be a possible solution for you you could do this: (chosen.jquery can be downloaded via nuget. You should also get "chosen" as it provides some stylesheets).
.aspx
<select class="chosen-select" style="width:350px;" tabindex="2">
<option value=""></option>
<option value="United States">United States</option>
<option value="United Kingdom">United Kingdom</option>
<option value="Afghanistan">Afghanistan</option>
<option value="Lesotho">Lesotho</option>
<option value="Liberia">Liberia</option>
<option value="Pakistan">Pakistan</option>
<option value="Palau">Palau</option>
</select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script src="Scripts/chosen.jquery.js"></script>
<script type="text/javascript">
var config = {
'.chosen-select': {},
'.chosen-select-deselect': { allow_single_deselect: true },
'.chosen-select-no-single': { disable_search_threshold: 10 },
'.chosen-select-no-results': { no_results_text: 'Oops, nothing found!' },
'.chosen-select-width': { width: "95%" }
}
$(function() {
for (var selector in config) {
$(selector).chosen(config[selector]);
}
});
</script>
solution2
0 2014-06-19 11:25:56
If you are allowed to use jQuery, you may look at this: http://jqueryui.com/autocomplete/#combobox
It allows you to bind different data source to the combo-box (drop-down).
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.