Угловой поиск нескольких входных значений

0

У меня есть набор результатов, заполненный через ng-repeat. Теперь мне нужно сделать какую-то фильтрацию. Я попытался использовать ng-фильтр для фильтрации результатов поиска. Случай использования. Пользователь может вводить несколько торговых точек, разделенных запятыми (или любой другой предпочтительный маханизм). И заполненный результирующий набор соответствует введенным пользователем торговца. Как работает в настоящее время: Поиск работает хорошо при поиске одного торгового объекта. Например, когда пользователь вводит метод merchantId, этот список списывает всех продавцов, начинающихся с merchantId. Когда входное значение является merchantId_1, результат связан только с merchantId_1. Мне нужно, чтобы пользователю была предоставлена возможность набирать merchantId_1, merchantId_2 (каждая разделенная запятая) и перечислить результат, соответствующий обоим торговым идентификаторам.

Каков возможный способ достижения этого с помощью Angular.

Теги:
autocomplete
ng-filter

1 ответ

0
Лучший ответ

Я сделал плункер, который достигает того, к чему вы стремились.

https://plnkr.co/edit/T9Z6GCFHzwH9xCKxkxJ7?p=preview

HTML:

<input ng-model="searchText" />
<div ng-repeat="merchant in merchants | merchantFilter:searchText">
  {{merchant}}
</div>

JS:

angular.module('app', [])
.controller('testController', function($scope) {
  $scope.merchants = ['merchant_1', 'merchant_2', 'merchant_3']
})
.filter('merchantFilter', function() {
  return function(merchants, searchText) {
    // If there no input, return full list
    if (!searchText) return merchants;
    // Split and trim the search string
    var searchTerms = searchText.split(',');
    searchTerms = searchTerms.map(function(term) {
      return term.trim();
    })
    // Filter and return merchants matching any search term
    var returnedArray = [];
    _.forEach(merchants, function(merchant) {
      if (_.find(searchTerms, function(term) {
        return merchant.indexOf(term) > -1;
      })) {
        returnedArray.push(merchant)
      }
    })
    return returnedArray;
  }
});
  • 0
    Fisso, это работает как шарм, есть ли способ улучшить этот код, где мы можем использовать угловое автозаполнение вместе с этим :)

Ещё вопросы

Сообщество Overcoder
Наверх
Меню