如何在Asp.Net MVC或Asp.Net Core中实现可搜索的Dropdown下拉框

操作前需先将select2.css和select2.min.js两个资源文件添加到项目中，确认资源引入正确后即可按以下步骤实现，注意select2依赖jQuery运行，需保证jQuery的引入顺序在select2之前。

基础实现步骤 #

• 步骤1：在视图页面中引入相关资源

  <!-- 引入select2样式文件 -->
  <link href="~/你的资源路径/select2.css" rel="stylesheet" />
  <!-- 引入select2脚本文件，需放在jQuery引入代码之后 -->
  <script src="~/你的资源路径/select2.min.js"></script>
  

• 步骤2：编写下拉框基础代码，支持原生写法和框架自带的强类型绑定写法
  原生select示例：

  <select id="searchSelect" class="form-control">
      <option value="">请选择</option>
      <option value="1">北京</option>
      <option value="2">上海</option>
      <option value="3">广州</option>
      <option value="4">深圳</option>
  </select>
  

  Asp.Net MVC/Core Razor绑定示例：

  @Html.DropDownListFor(m => m.SelectedCityId, Model.CityList, "请选择", new { @class = "form-control", @id = "searchSelect" })
  

• 步骤3：页面加载完成后初始化select2插件，自动开启搜索功能

  $(document).ready(function () {
      $('#searchSelect').select2({
          placeholder: "输入关键词搜索", // 输入框占位提示
          allowClear: true, // 是否显示清空按钮
          width: "100%" // 自适应父容器宽度
      });
  });
  

进阶：远程搜索实现（适配大数据量场景） #

如果下拉选项数据量过大，可配置ajax参数实现后端搜索，减少前端加载压力：

$(document).ready(function () {
    $('#searchSelect').select2({
        placeholder: "输入城市名搜索",
        allowClear: true,
        width: "100%",
        ajax: {
            url: "/CityController/GetSearchList", // 后端搜索接口地址
            type: "post",
            dataType: "json",
            delay: 300, // 输入延迟300ms搜索，减少无效请求
            data: function (params) {
                return {
                    keyword: params.term, // 搜索关键词
                    page: params.page || 1
                };
            },
            processResults: function (res, params) {
                return {
                    // 后端返回数据需符合[{id:"值",text:"显示文本"}]格式
                    results: res.data.list,
                    pagination: {
                        more: (params.page * 10) < res.data.total // 分页控制
                    }
                };
            },
            cache: true
        },
        minimumInputLength: 1 // 最少输入1个字符才触发搜索
    });
});

内容的提问来源于stack exchange，提问作者Jaynil Choksi