如何在mvc5中创建可搜索的下拉列表？

Question

我试图让我目前的下拉列表（脚手架由mvc）搜索。

我添加了这个脚本，但没有帮助。

<script type="text/javascript"> 
$(document).ready(function() { 
     $("select").searchable({ 
      maxListSize: 100, 
      maxMultiMatch: 50, 
      exactMatch: false, 
      wildcards: true, 
      ignoreCase: true, 
      latency: 200, 
      warnMultiMatch: 'top {0} matches ...', 
      warnNoMatch: 'no matches ...', 
      zIndex: 'auto' 
     }); 
}); 

这些都是我的下拉列表

<div class="form-group"> 
     @Html.LabelFor(model => model.CustomerID, "CustomerID", htmlAttributes: new { @class = "control-label col-md-2" }) 
     <div class="col-md-10"> 
      @Html.DropDownList("CustomerID", null, htmlAttributes: new {@class = "form-control" }) 
      @Html.ValidationMessageFor(model => model.CustomerID, "", new { @class = "text-danger" }) 
     </div> 
    </div> 

    <div class="form-group"> 
     @Html.LabelFor(model => model.VideoID, "VideoID", htmlAttributes: new { @class = "control-label col-md-2" }) 
     <div class="col-md-10"> 
      @Html.DropDownList("VideoID", null, htmlAttributes: new { @class = "form-control" }) 
      @Html.ValidationMessageFor(model => model.VideoID, "", new { @class = "text-danger" }) 
     </div> 
    </div> 

Answer 1

<div class="form-group"> 
     @Html.LabelFor(model => model.VideoID, "VideoID", htmlAttributes: new { @class = "control-label col-md-2" }) 
     <div class="col-md-10"> 
      @Html.DropDownList("VideoID", null, htmlAttributes: new { @class = "form-control",@class="select2" }) 
      @Html.ValidationMessageFor(model => model.VideoID, "", new { @class = "text-danger" }) 
     </div> 
    </div> 

<script type="text/javascript"> 
    $(document).ready(function() { 
     $(".select2").select2(); 
    }); 
    </script> 

<select class="js-example-basic-single"> 
    <option value="AL">Alabama</option> 
    ... 
    <option value="WY">Wyoming</option> 
</select>