带过滤器选项的Asp.net DropDownList

Question

有没有办法我可以使用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>

Answer 1

如果选择了可能是可行的解决方案，则可以执行以下操作：（可以通过nuget下载chosen.jquery。由于它提供了一些样式表，因此您也应该获得“ chosen”）。

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

Answer 2

如果允许使用jQuery，则可以查看以下内容： http : //jqueryui.com/autocomplete/#combobox

它允许您将不同的数据源绑定到组合框（下拉菜单）。