如何使用 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，因为它在您的 HTML 页面中，并连接 jquery/javascript 事件以选择相关值。

希望这能提供一个粗略的想法。