mvc angularjs 从本地数据库加载超过 16000 条记录时自动完成错误

Question

我是 angularJS 的新手，所以如果有什么不是很清楚，请先道歉。我正在尝试为原型内部应用程序创建主捐助者搜索。我可以获得 ~7.5mill 记录的数据并加载到 var 中。问题是如果我删除 Take() 或保留 Take(> 16000) 记录，UI 会抛出错误。有没有我遗漏的东西或者这不是推荐的搜索方法？理想情况下，我希望用户能够搜索每个捐赠者。我在自动完成部分使用 angucomplete-alt.js 。 angucomplete-alt.js

查看：

@{
    ViewBag.Title = "Index";
}

<div class="container">

    <h2>Search Donor</h2>

    <div ng-app="donorSearch">
        <div ng-controller="ngAutoCompleteController">
            <div angucomplete-alt id="txtAutocomplete" placeholder="Type Donor name" pause="100" 
                 selected-object="afterSelectedDonor" local-data="Donors" search-fields="LastName,FirstName,AccountNumber"
                 title-field="AcctNm"  minlength="1" input-class="form-control" match-class="highlight" >

            </div>
            <div ng-show="SelectedDonor">
                Selected Donor : {{SelectedDonor.FullName}}
            </div>
        </div>
    </div>

</div>

@* JS *@
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular.min.js"></script>
<script src="~/Scripts/angucomplete-alt.js"></script>
<script src="~/Scripts/donorSearch.js"></script>
@* CSS *@
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/angucomplete-alt.css" rel="stylesheet" />
<style type="text/css">
    .angucomplete-dropdown {
        overflow-y: auto;
        max-height: 200px;
    }
</style>

控制器：

public JsonResult GetDonors()
    {

        using (SeDbEntities dc = new SeDbEntities())
        {

            var v = (from ln in dc.A01_AccountMaster
                     where ln.LastName != null & ln.LastName != string.Empty
                     select new 
                     {
                         ln.LastName
                         ,
                         ln.FirstName
                         ,
                         ln.AccountNumber
                         ,
                          FullName = ln.FirstName +" "+ ln.LastName
                         ,
                         AcctNm = ln.LastName + ", " + ln.FirstName +" "+ln.AccountNumber
                     }
                    ).OrderBy(n => n.LastName.Trim()).Take(16000).ToList();
            return new JsonResult { Data = v, JsonRequestBehavior = JsonRequestBehavior.AllowGet }; 
        }
    }
}

脚本：

var app = angular.module('donorSearch', ['angucomplete-alt']);
app.controller('ngAutoCompleteController', ['$scope', '$http', function($scope, $http) {
  $scope.Donors = [];
  $scope.SelectedDonor = null;


  //After select donor event
  $scope.afterSelectedDonor = function(selected) {
    if (selected) {
      $scope.SelectedDonor = selected.originalObject;
    }
  }

  //Populate data from database 
  $http({
    method: 'GET',
    url: '/home/GetDonors'
  }).then(function(data) {
    $scope.Donors = data.data;
  }, function() {
    alert('Error');
  })
}]);

Answer 1

谨防控件制造商提供的任何 "samples"。它们几乎可以保证只呈现最基本的场景，并且通常与现实世界无关。从我对该控件的了解来看，该示例演示了客户端自动完成功能，这对于所有实际用途来说都是无用的。（在这种情况下只需使用下拉菜单）您运行遇到了问题，因为您正试图向客户提供所有数据的完整列表。当您的项目数量相对较少（100 到 1000 的）时，客户端会工作，但当您有更多项目时，客户端不会工作。

对于自动完成控件，您想查找实现服务器端自动完成的示例。这涉及将控件连接到 HTTP GET / Fetch，以便在您键入控件时，服务器调用会运行查询以获取与用户键入的内容匹配的建议，以及 returns 有限的建议。（即 500）由您来实现搜索逻辑，例如查找以键入的内容开头的匹配项，而不是使用其他查询方法。另一个重要的细节是在你的输入事件上使用去抖动以确保你的搜索不会随着用户的每次按键而重复触发，而是等待片刻，以便如果用户输入 4 个字符（"fred") 并暂停，1 次搜索针对 "fred" 而不是 4 次搜索："f"、"fr"、"fre" 和 "fred"。

从哪里开始： https://itnext.io/using-angular-6-material-auto-complete-with-async-data-6d89501c4b79

可能有大量Angular的自动完成控件，寻找服务器端examples/implementations，并确保添加去抖动。

mvc angularjs 从本地数据库加载超过 16000 条记录时自动完成错误

mvc angularjs AutoComplete error when loading more than 16000 records from local database

linq

jquery

entity-framework

asp.net-mvc-4

angularjs