Styjun

I'm new to angularJS so apologies before hand if something is not very clear.
I'm trying to create a master donor search for a prototype internal app. I can get the data which is ~7.5mill records and loaded to a var. Problem is the UI throws an error if I remove Take() or leave Take(> 16000) records. Is there something that I'm missing or Is this not the recommended approach for the search purpose ?
Ideally, I want users to be able to search every donor. I'm using angucomplete-alt.js for the autocomplete part. angucomplete-alt.js

View :

@
 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>

Controller:

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 ; 
 
 
}

Scripts:

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');
 )
]);

Beware of any "samples" provided by control makers. They are pretty much guaranteed to present only the most basic scenarios, and typically aren't relevant out in the real world. From what I can see of that control the example demonstrates client-side auto-complete, which for all practical purposes is useless. (Just use a drop-down in that case) You're running into a problem because you're trying to provide a complete list of all data to the client. Client side works when you have a relatively small # of items (100's - 1000's) but not when you have a lot more.

For an auto-complete control, you want to find examples of implementing a server-side auto-complete. This involves wiring the control to an HTTP GET / Fetch so that as you type into the control, a server call goes and runs a query to fetch suggestions matching what the person types, and returns a limited # of suggestions. (I.e. 500) It's up to you to implement the search logic, such as finding matches starting with what is typed, vs. using other querying methods. The other important detail is to also use a debounce on your input event to ensure that your search isn't fired off repeatedly with every key-press from the user, but waits a moment so that if a user is typing 4 characters ("fred") and pausing, 1 search goes off for "fred" rather than 4 searches: "f", "fr", "fre", and "fred".

Somewhere to start:
https://itnext.io/using-angular-6-material-auto-complete-with-async-data-6d89501c4b79

There are probably a large number of auto-complete controls for Angular, look for server side examples/implementations, and be sure to add a debounce.