Question

我必须将近50k记录绑定到我的asp.net下拉列表中，并且必须可以搜索。实施它的最佳方法是什么？是否有任何缓存技术，以便在我们滚动时加载列表？感谢建议。

请告知。

Answer 1

我建议您利用jQuery的自动完成插件：

它是可配置的，并且具有开箱即用的自动完成搜索功能。它也可以使用您的远程数据源（尽管您可能会考虑分页API响应）：

http://api.jqueryui.com/autocomplete/#option-source

Answer 2

在后端，创建一个controller action（如果您使用的是ASP.NET MVC）或page method（如果您使用的是ASP.NET Web窗体），它会收到searchTerm 1}}参数并返回顶部（例如，100）结果的数组。

在前端，使用预先 / 自动填充插件，例如this one。当用户设置搜索词时，对后端执行Ajax请求并显示结果。执行Ajax request时，您还可以启用和配置缓存。不需要进一步优化。

Answer 3

使用自动完成文本框并从远程API设置数据源，尤其是在处理大型数据集时。这将避免您的应用程序UI在每次字符搜索时被挂起。

参考链接：https://github.com/ghiden/angucomplete-alt

Answer 4

您可以使用网络服务来实现这一目标。

首先在aspx页面中添加以下代码。

<div>
    <input type="text" value="" id="tbCountries" />
</div>

现在，使用以下代码创建您的Web服务。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Data.SqlClient;

[System.Web.Script.Services.ScriptService]
public class WebService : System.Web.Services.>WebService {
    [WebMethod]
    public List<string> ShowCountryList(string sLookUP)
    {
        List<string> lstCountries = new List<string>();

        string sConnString = "Data Source=DNA;Persist Security Info=False;" +
            "Initial Catalog=DNA_CLASSIFIED;User Id=sa;Password=;Connect Timeout=30;";

        SqlConnection myConn = new SqlConnection(sConnString);
        SqlCommand objComm = new SqlCommand("SELECT CountryName FROM Country " + 
            "WHERE CountryName LIKE '%'+@LookUP+'%' ORDER BY CountryName", myConn);
        myConn.Open();

        objComm.Parameters.AddWithValue("@LookUP", sLookUP);
        SqlDataReader reader = objComm.ExecuteReader();

        while (reader.Read()) {
            lstCountries.Add(reader["CountryName"].ToString());
        }
        myConn.Close();  return lstCountries;
    }
}

最后，使用webservice创建用于绑定Textbox的jquery方法，

<script>
    $(document).ready(function() {
        BindControls();
    });

    function BindControls() {
        $("#tbListOfCountries").autocomplete({
            source: function(request, response) {
                $.ajax({
                    url: "WebService.asmx/ShowCountryList",
                    data: "{ 'sLookUP': '" + request.term + "' }",
                    dataType: "json",
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    dataFilter: function(data) { return data; },
                    success: function(data) {
                        response($.map(data.d, function(item) {
                            return { value: item }
                        }))
                    },
                    error: function(XMLHttpRequest, textStatus, errorThrown) {
                        alert(textStatus);
                    }
                });
            },
            minLength: 1    // MINIMUM 1 CHARACTER TO START WITH.
        });
    }
</script>

Answer 5

取决于列表项的来源。如果他们来自列表或数据库只是附加他们然后使用javascript搜索列表。

Answer 6

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>    

</head>
<body>
    <form id="form1" runat="server">
        <div class="ui-widget">
            <asp:TextBox ID="txtDepartment" runat="server"  ClientIDMode="Static" />            
        </div>
    </form>
    <script>       

        $(function () {

            $("[id$=txtDepartment]").autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: "FetchDropdownList.aspx/GetDepartment",
                        data: "{'departmentName':'" + document.getElementById('txtDepartment').value + "'}",
                        dataType: "json",
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        dataFilter: function (data) { return data; },
                        success: function (data) {
                            response($.map(data.d, function (item) {
                                return {
                                    value: item.Name
                                }
                            }))
                        },
                        error: function (XMLHttpRequest, textStatus, errorThrown) {
                            alert(textStatus);
                        }
                    });
                },
                minLength: 1
            });
        });        
    </script>
</body>
</html>

public class Department
        {
            public int Id { get; set; }
            public string Name { get; set; }
        }

        private static List<Department> GetDepartment()
        {
            List<Department> departments = new List<Department>();
            for (int i = 0; i < 10000; i++)
            {
                Department department = new Department();
                department.Id = i;
                department.Name = "Department " + i.ToString();
                departments.Add(department);
            }
            return departments;
        }

        [WebMethod]
        public static List<Department> GetDepartment(string departmentName)
        {            
            int totalDepartments = GetDepartment().Count;
            List<Department> departments = GetDepartment().Where(d => d.Name.ToLower().StartsWith(departmentName.ToLower())).Take(20).ToList();

            return departments;
        }

Answer 7

我遇到了和你一样的问题，我使用了 RadAutoCompleteBox 。它有很多客户端和服务器端事件，可帮助您处理各种情况。它非常适合ASP.NET项目。

Answer 8

我看到两个直接的解决方案。

正如其他人建议使用ajax搜索相关项目作为用户类型并显示它们。
在页面加载时获取所有数据并将其存储在javascript变量中，然后您可以在该变量上搜索用户类型并将搜索结果绑定到下拉列表。

与this one类似：

Answer 9

绝对任何自动填充实施都适用于您的方案。

解决方案1：使用自动填充选择框

如果您不想浪费带宽或想要支持设备低规格，你应该去服务器端自动完成数据获取。
如果您想要高可用性并且不关心带宽，您可以使用自动完成功能和本地数据（一次获取50k记录并绑定到自动完成）。但要确保你不要画画所有这些都是一次性进入DOM。 您需要限制记录在特定时间出现。

解决方案2 ：使用select with virtualization

但是如果你想给你的最好的可用性客户，您应该使用选择框所在的解决方案 虚拟化以及在滚动选择框时加载到DOM的数据。通过虚拟化，您确保只有那些项目被推送到 DOM ，这些项目正在显示那个时间点的屏幕。

您可以找到基于jQuery的虚拟选择here

React here
中的类似实现

asp.net下拉列表缓存巨大数据

9 个答案: