使用 Jquery 创建可搜索的下拉选择框 - 在 C MVC 中选择 select2

此示例将演示 MVC 中的可搜索选择框。当用户键入新字符时，它使用 Ajax 从数据库获取所有记录。我将考虑 Country 和它的 City 示例来说明 Searchable 下拉框的功能。代码背后是带 MVC 的 C#，但它易于掌握整个概念。

首先，我以步进方式创建了基本背景。最后一步是执行此代码的 Select2 jqery 方法。

第 1 步： 在剃刀中声明 DropDownListFor 控件。它在 HTML 标记中创建选择框。

隐藏变量 ajaxUrlGetAutoCompleteSearchSuggestion 将由 Jquery 的 Ajax 调用 - select2 库方法使用。

隐藏变量值字段还包含剃刀库方法 url.action。它有两个参数。第一个参数，GetAutoCompleteSearchSuggestion 是 C#方法，它是服务器端的入口点，用于 Ajax 调用以获取记录。第二个参数是控制器名称 Country。

  <h2> 
                <label>@Html.LabelFor(m => m.ddlCountry)</label>
                @Html.DropDownListFor(m => m.ddlCountry, Model.Station, new { @class = "select2Style" })
</h2>

<input type="hidden" id="ajaxUrlGetAutoCompleteSearchSuggestion" value='@Url.Action("GetAutoCompleteSearchSuggestion", "Country")' />

第 2 步： 这些是可用于选择框的预定义 CSS 类。你可以使用这些类自定义控件。此外，你可以为控件添加自己的 css 类。

/* Input field */
.select2-selection__rendered { font-size:medium; font-weight:normal; }

/* Around the search field */
.select2-search { font-size:small; font-weight:normal;  }

/* Search field */
.select2-search input { font-size:medium; font-weight:normal; }

/* Each result */
.select2-results {
    font-family: Arial, Helvetica, sans-serif;
    font-size: medium;
     font-weight:normal;
    
  }

/* Higlighted (hover) result */
.select2-results__option--highlighted { font-size:medium;  font-weight:normal; }

/* Selected option */
.select2-results__option[aria-selected=true] { 
     background: #3ea211;
     font-family: Arial, Helvetica, sans-serif;
    font-size:medium;
    font-weight:normal;   
 }

/* My css class*/
.select2Style {
    width:200px;
}

第 3 步： 创建模型。请注意，相同的变量名称在剃刀声明中。

[Display(Name = "Country:")]
public string ddlCountry { get; set; }
public IEnumerable<SelectListItem> Country { get; set; }

步骤 4： 创建 CountryController 和 C#方法，每当用户在可搜索的下拉列表文本框中输入文本时，该方法将由 jquery ajax 方法调用。

public ActionResult GetAutoCompleteSearchSuggestion(CountryQuery queryParameters)
        {
            string ErrorMessage = "success";
            Dictionary<double, string> suggestions = new Dictionary<double, string>();
             
            try
            {   
        suggestions =  GetCountryList( queryParameters.query);
            }
            catch (Exception Ex)
            {
                ErrorMessage = Ex.Message;               
                return Json(ErrorMessage);
            }
            return Json(suggestions.Select(c => new { Name = c.Value, ID = c.Key }).ToList(), 
    JsonRequestBehavior.AllowGet);
            }

步骤 5： 设置数据库查询和操作以获取记录。它获得了国家列表。请注意 db 查询，它会影响获取和显示下拉项的方式。你必须自定义查询以根据你的要求获取结果。

 public Dictionary<string, string> GetCountryList(string filterId)
        {
            Dictionary<string, string> ddlcountryDictionary = new Dictionary<string, string>();
            OracleDataReader reader = null;
            OracleConnection oraConnection = new OracleConnection(oracleConnStr);
            string firstItem = string.Empty;
            try
            { 
                oraConnection.Open();
                string ddlQuery = "SELECT CountryId, countryName FROM tblCountry WHERE UPPER(countryName) LIKE UPPER ('"+filterId+"%')  ORDER BY 2 ASC";
                oraCommand = new OracleCommand(ddlQuery, oraConnection);
                reader = oraCommand.ExecuteReader();
                string countryValue = "Select Item";
                string countryId = -1;
             
                if (reader.HasRows)
                {
                    while (reader.Read())
                    {
                        countryId =  reader[0].ToString();
                        countryValue = reader[1].ToString();                        
                        ddlcountryDictionary.Add(countryId, countryValue);
                    }
                }                
            }
            catch (Exception ex)
            {
                 
                throw new Exception("No Country name Exists.");
            }
            finally
            {
                reader.Dispose();
                oraCommand.Dispose();
                oraConnection.Close();
            }             
            return ddlcountryDictionary;
        }

第 6 步： jQuery 函数会列出国名开始与用户输入的文本，如果用户选择 是 ，那么所有国家与名字开始 一 将陆续上市和明年，如果用户键入 N 则国名未开始 an 将被过滤掉。

 $("#ddlCountry").select2({
        ajax: {
            url: $("#ajaxUrlGetAutoCompleteSearchSuggestion").val(),
            data: function (params) {
                var queryParameters = {  
                    //restrictedCountry: $("#resCountry").val(),  // pass your own parameter                
                    query: params.term, // search term like "a" then "an"
                    page: params.page
                };
                return queryParameters;
            },
            dataType: "json",
            cache: true,
            delay: 250,
            //type: 'POST',
            contentType: "application/json; charset=utf-8",
            processResults: function (data, params) {
                params.page = params.page || 1;
                return {
                    results: $.map(data, function (val, item) {
                        return { id: val.ID, text: val.Name };
                    }),
                   // if more then 30 items in dropdown, remaining set of items  will be show on numbered page link in dropdown control.
                    pagination: { more: (params.page * 30) < data.length }
                };
            }
        },
        minimumInputLength: 1 // Minimum length of input in search box before ajax call triggers
    });

请在此站点查看 Select2 的各种示例