Ошибка автозаполнения mvc angularjs при загрузке более 16000 записей из локальной базы данных
Я новичок в angularJS, поэтому заранее извиняюсь, если что-то не очень понятно. Я пытаюсь создать поиск основного донора для прототипа внутреннего приложения. Я могу получить данные, которые составляют ~ 7,5 миллионов записей, и загрузить их в переменную. Проблема в том, что пользовательский интерфейс выдает ошибку, если я удаляю Take() или оставляю записи Take(> 16000). Есть ли что-то, чего мне не хватает, или это не рекомендуемый подход для целей поиска? В идеале я хочу, чтобы пользователи могли искать каждого донора. Я использую 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');
})
}]);
Ответы 1
Остерегайтесь любых «образцов», предоставленных производителями элементов управления. Они практически гарантированно представляют только самые основные сценарии и, как правило, не имеют отношения к реальному миру. Из того, что я вижу об этом элементе управления, пример демонстрирует автозаполнение на стороне клиента, которое для всех практических целей бесполезно. (Просто используйте раскрывающийся список в этом случае) Вы столкнулись с проблемой, потому что пытаетесь предоставить клиенту полный список всех данных. Клиентская сторона работает, когда у вас относительно небольшое количество предметов (100-1000), но не когда их намного больше.
Для элемента управления автозаполнением вам нужно найти примеры реализации автозаполнения на стороне сервера. Это включает в себя подключение элемента управления к HTTP GET / Fetch, чтобы при вводе в элемент управления вызов сервера выполнял запрос для получения предложений, соответствующих тому, что вводит человек, и возвращал ограниченное количество предложений. (т. е. 500). Вам решать, как реализовать логику поиска, например, поиск совпадений, начинающихся с введенного текста, по сравнению с использованием других методов запроса. Другая важная деталь заключается в том, чтобы также использовать debounce для вашего события ввода, чтобы гарантировать, что ваш поиск не будет запускаться повторно при каждом нажатии клавиши пользователем, а ждет некоторое время, чтобы, если пользователь вводит 4 символа ("fred ") и пауза, выполняется 1 поиск "fred", а не 4 поиска: "f", "fr", "fre" и "fred".
С чего начать: https://itnext.io/using-angular-6-material-auto-complete-with-async-data-6d89501c4b79
Вероятно, для Angular существует большое количество элементов управления автозаполнением, ищите примеры/реализации на стороне сервера и обязательно добавляйте откат.
я как бы забыл сделать что-то подобное, так как я был сосредоточен на «Угловом решении», но позвольте мне перейти по предоставленной ссылке, спасибо за предложение