带有Filter选项的Asp.net DropDownList

时间:2014-06-19 11:19:52

标签: asp.net vb.net visual-studio

有没有办法我可以使用asp.net DropDownList控件添加过滤器选项? 比如,用户开始输入它并相应地缩小下面的列表。

<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>

谢谢.. Anjum

更新:

我选择了JS,但仍然没有为我工作,这是我的页面代码:

<%@ 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 个答案:

答案 0 :(得分:1)

如果选择对您来说可能是一个可能的解决方案,您可以这样做:( selected.jquery可以通过nuget下载。您也应该选择&#34;选择&#34;因为它提供了一些样式表)。

<强>的.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>

答案 1 :(得分:0)

如果您被允许使用jQuery,您可以查看:http://jqueryui.com/autocomplete/#combobox

它允许您将不同的数据源绑定到组合框(下拉列表)。