如何使用 Select2.js 将搜索功能添加到 asp.net 中的下拉列表

Question

我有一个带有 MasterPage 的项目。我添加了一个内容页面名称 AddEmployeeDetail.aspx 在这里

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeFile="AddEmployeeDetail.aspx.cs" Inherits="DeceasedSystem.AddEmployeeDetail" %>

在内容页面中 AddEmployeeDetail.aspx 我有一个名为 ddEmployeeName 的下拉列表。在页面加载时，此下拉列表使用 EmployeeName 从数据库中填充。这是 HTML

<div class="form-group row">
    <label for="name" class="col-4 col-form-label">Employee Name</label>
    <div class="col-8">
        <asp:DropDownList ID="ddEmployeeName" runat="server" class="form-control here"></asp:DropDownList>
    </div>
</div>

这里是.cs文件代码

protected void Page_Load(object sender, EventArgs e)
{
    ddEmployeeName.DataSource = LoadComboBoxEmployeeName();
    ddEmployeeName.DataTextField = "Name";
    ddEmployeeName.DataValueField = "Id";
    ddEmployeeName.DataBind();
    ddEmployeeName.Items.Insert(0, new ListItem("--Select--", "0"));
}

string CS = ConfigurationManager.ConnectionStrings["DeceasedDBCS"].ConnectionString;

//Load ComboBox Company
private DataTable LoadComboBoxEmployeeName()
{
    DataTable dtFatherName = new DataTable();
    using (SqlConnection con = new SqlConnection(CS))
    {
        using (SqlCommand cmd = new SqlCommand("SELECT Id, Name FROM TableEmployeeMaster", con))
        {
            cmd.CommandType = CommandType.Text;
            con.Open();
            SqlDataReader r = cmd.ExecuteReader();
            dtFatherName.Load(r);
        }
    }
    
    return dtFatherName;
}

我还在这个 AddEmployeeDetail.aspx 内容页面中添加了一个脚本文件，它是：

 <script>
    $(document).ready(function () {
     $("#ddEmployeeName").select2({
        placeholder: "Select an option",
        allowClear: true
     });
 });
</script>

还有 link 个 Jquery.js 和 Select2.js 个文件，即

<script src="js/jquery.js"></script>
<script src="js/select2.js"></script>

这两个文件都在内容占位符中。现在我想，在页面加载和数据进入下拉列表后，当用户单击下拉列表时，he/she 应该能够搜索任何特定数据，然后 select。简而言之，我想将搜索功能添加到下拉列表中。到目前为止我做了什么，它没有用。它加载数据但不添加搜索功能。我不知道是什么问题。还有，如果在 MasterPage 而不是内容页中添加脚本和脚本文件，它会起作用吗？我正在使用 BS4。请帮助我。

Answer 1

尝试将 DropDownList 的 ClientIDMode 属性设置为静态。

Answer 2

您可以简单地使用：

$("#<%=ddEmployeeName.ClientID%>").select2({
    placeholder: "Select an option",
    allowClear: true
});

如何使用 Select2.js 将搜索功能添加到 asp.net 中的下拉列表

How to add Search Functionality to a dropdownlist in asp.net using Select2.js

c#

asp.net

jquery

master-pages

bootstrap-4