Блог

Я новичок в 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 amp; 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');
  })
}]);  

Остерегайтесь любых «образцов», предоставляемых производителями элементов управления. Они в значительной степени гарантированно представляют только самые базовые сценарии и обычно не актуальны в реальном мире. Из того, что я вижу в этом элементе управления, пример демонстрирует автозаполнение на стороне клиента, которое для всех практических целей бесполезно. (В этом случае просто используйте выпадающий список) Вы столкнулись с проблемой, потому что пытаетесь предоставить клиенту полный список всех данных. Клиентская сторона работает, когда у вас есть относительно небольшое количество элементов (100-1000), но не тогда, когда у вас их намного больше.

Для управления автозаполнением вы хотите найти примеры реализации автозаполнения на стороне сервера. Это включает в себя подключение элемента управления к HTTP GET / Fetch, чтобы при вводе в элемент управления выполнялся вызов сервера и выполнялся запрос для извлечения предложений, соответствующих тому, что вводит пользователь, и возвращает ограниченное количество предложений. (т.е. 500) Вам решать, как реализовать логику поиска, например, находить совпадения, начинающиеся с введенного, по сравнению с использованием других методов запроса. Другая важная деталь заключается в том, чтобы также использовать отмену вашего события ввода, чтобы гарантировать, что ваш поиск не запускается повторно при каждом нажатии клавиши пользователем, а выжидает момент, чтобы, если пользователь вводит 4 символа («fred») и делает паузу, запускался 1 поиск для «fred», а не 4 поиска: «f», «fr», «fre» и «fred».

С чего бы начать:https://itnext.io/using-angular-6-material-auto-complete-with-async-data-6d89501c4b79

Вероятно, существует большое количество элементов управления автозаполнением для Angular, поищите примеры / реализации на стороне сервера и обязательно добавьте удаление.