如何使用Select2.js从WebService填充和优化DropDownList

Question

我正在使用客户选择模块，该模块在键入时将显示autocomplete。似乎Select2.js可以完成这项工作，我已经设法通过简单的数据绑定将dropdownlist填充到后端（.cs文件）中。

[问题是，我仅使用15个客户的样本数据，因此性能还不错，我希望有将近2000个客户的实际数据，因此仅通过绑定便会破坏性能。

这是我的绑定事件和select2.js的实现的代码

[.aspx文件：

<asp:DropDownList runat="server" ID="ddlCustomers" CssClass="form-control" async="">
   <asp:ListItem></asp:ListItem>
</asp:DropDownList>

[.cs文件：

protected void BindDropDownCustomers()
{
    DataTable dt = SharedClass.getAPI("CustomerProfile_All"); //Returns Data from Webservice
    DataColumn newColumn = new DataColumn();

    //just formating the display
    newColumn.ColumnName = "FullName";
    newColumn.DataType = System.Type.GetType("System.String");
    newColumn.Expression = "Cust_Last_Name+', '+Cust_First_Name";
    dt.Columns.Add(newColumn);
    ddlCustomers.DataTextField = "FullName";
    ddlCustomers.DataValueField = "SmartCardID";
    ddlCustomers.DataSource = dt.DefaultView;
    ddlCustomers.DataBind();
    ddlCustomers.Items.Insert(0, new ListItem("Select Customer", ""));
}

[select2.js脚本：

$('#<%= ddlCustomers.ClientID %>').select2({
   placeholder: "Select customer",
   minimumResultsForSearch: 2,
   minimumInputLength: 3,
   allowClear: true
});

我想要类似的事情，在用户输入至少3个字符之后，将执行查询并获取所有相关数据，这些数据将填充dropdownlist并同时限制或优化显示。

Answer 1

好吧，在我看来，使用javascript在客户端计算机上运行2000次循环（最好检查用户键入的字符是否大于3）调用服务器并在用户键入任何内容时打开SQL Connection来查询内容。可以将其想象为当网络变慢时，延迟会更大，如果成千上万的用户对服务器进行相同的调用，而服务器只是在搜索记录，该怎么办？好吧，这只是一个意见。当然，您可以决定什么适合您。

如果您仍然想要这样做，则可以查找一些付费控件，或者查看ajax工具包中是否包含一个控件。此外，如果您想以自定义方式进行操作，则可以使用jquery-ui autocomplete完成任务。

我不会提供源代码来执行此操作，但这是您可能想要执行的粗略想法：

1. 显示一些基本的加载记录
2. 将jQuery-UI autocomplete连接到正在搜索并从数据库返回结果的文本框中
3. 当在HTML页面中得到响应并添加jquery/javascript事件以选择相关值时，添加响应时添加自定义HTML。

希望这给出一个粗略的主意。