Angularjs поиск слишком медленный при входе в окно поиска

Question

Я использую angularjs для фильтра поиска. У меня есть несколько записей в моем приложении. Но не медленно отображать данные. Он работает очень хорошо.

У меня есть функция поиска для фильтрации данных. Например,

У меня есть следующие записи:

    "New Logic Data Starts"

    "New Data Server"

    "Server records found new"

    "Welcome to angularjs"

• ) Если я собираюсь искать «Новый» в окне поиска, он покажет первые 3 Результаты. Эти случаи работают в моем приложении. Но для ввода следующей буквы в текстовом поле требуется не менее 5 секунд.

• ) То же, что и backspace, если я уберу букву «w» в тексте «New», мне нужно подождать 4 или 5 секунд, чтобы убрать следующую букву «е». Снова мне нужно подождать и убрать "N".

if($scope.search){
        return $scope.search.split(' ').every(function(search){
            return card.Tag.toLowerCase().indexOf(search.toLowerCase()) != -1;
        });
      }else{
        return true;
      }

<input type="search" class="form-control search-field" placeholder="Search Card" ng-model="search">

Здесь "card.Tag" означает, что карта - это список данных в моем ответе, а тег - это поле для результатов поиска.

Например, "Tag": "\"New Logic Data Starts\",\"New Data Server\",\"Server records found new\",\"Welcome to angularjs\"",

Здесь у меня все работает нормально. Но только его очень медленно. Что я могу сделать для этого?

Answer 1

Вы можете использовать angularjs filters.

(() => {
  let myApp = angular.module('myApp', []);

  myApp.controller('MyCtrl', ['$scope', ($scope) => {
    let records = ["New Logic Data Starts",
      "New Data Server",
      "Server records found new",
      "Welcome to angularjs"
    ];

    $scope.records = records;
  }]);
})();

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="myApp">
  <input type="text" ng-model="filterString">
  <div ng-controller="MyCtrl">
    <ul>
      <li ng-repeat="r in records | filter: filterString">
        {{r}}
      </li>
    </ul>

  </div>
</div>

Answer 2

Вам не нужно реализовывать собственный код для поиска в нижнем регистре. AngularJs фильтры более продвинутые и очень быстрые. У меня есть набор данных JSON с 8000 объектов, и фильтр angularJs может искать их всего за 400 миллисекунд.

ng-repeat="o in records | filter: searchString"