使用带有类别和标签的 angularJS 进行实时搜索答案

【问题标题】：live search with angularJS with categories and tags使用带有类别和标签的 angularJS 进行实时搜索
【发布时间】：2016-08-13 13:52:46
【问题描述】：

首先，我想说我正在关注fiddle 使用 AngularJS 进行高级实时搜索，效果很好，但对于我的场景，我需要同时搜索类别和子类别。

示例列表：

$scope.names = [
         {
         name: "Kitchen",
         tags: [
         "Knife",
         "Plate",
         "Fork"
         ]
         },
         {
         name: "Garage",
         tags: [
         "Car",
         "Wrench",
         ]
         }

场景搜索：

输入搜索：

knife

结果：

<li><b>Kitchen</b></li>
<li>Knife</li>

场景搜索 2：

输入搜索：

garage

结果：

<li><b>Garage</b></li>

我试图用一些东西制作某种形式的“双重”ng-repeat

像这样：ng-repeat="name in names || name in names 通过将类别与子项分开，但填充列表会出现问题。我也不知道AND 的正确运算符，但我可以想象有很多更好的解决方案，但我不知道怎么做，请注意，我对 AngularJS 和 JS 还是很陌生。

【问题讨论】：

您可以考虑将数组预处理为平面一维数组，然后使用它来执行搜索。
是的，这很好，但是如何在猫名中添加粗体文本？
每个数组元素都可以有一个可选的类别属性。在处理原始数组时，您可以将其附加到每个标签。
我不能同时存储类别和对象，因为在我的数据列表中，有时我在类别和标签中都有相同的词，我收到以下错误：[ngRepeat:dupes]。
如果我搜索knife并且它出现在两个类别中，你会输出什么？

标签： javascript angularjs search

【解决方案1】：

要使 filter 在两个数组中都起作用，您必须创建一个 custom filter。

看到它工作：

angular
  .module('app', [])
  .controller('MainCtrl', MainCtrl)
  .filter('customFilter', customFilter);

MainCtrl.$inject = ['$scope'];

function MainCtrl($scope) {

  $scope.names = [
    {
      name: "Kitchen",
      tags: [
        "Knife",
        "Plate",
        "Fork"
      ]
    }, 
    {
      name: "Garage",
      tags: [
        "Car",
        "Wrench",
      ]
    }
  ];
}

function customFilter() {
  return function(items, search) {
    if (!search) return items;
    
    search = search.toLowerCase();
    return items.filter(function(item) {
      return item.name.toLowerCase().indexOf(search) !== -1 || item.tags.filter(function(tag) {
        return tag.toLowerCase().indexOf(search) !== -1;
      }).length;
    });
  }
}

<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
</head>

<body ng-controller="MainCtrl">
  <input type="text" placeholder="Search..." ng-model="search">
  <ul ng-repeat="obj in names | customFilter: search track by $index">
    <li><strong ng-bind="obj.name"></strong></li>
    <ul>
      <li ng-repeat="tag in obj.tags | filter: search track by $index" ng-bind="tag"></li>
    </ul>
  </ul>
</body>

</html>

希望对你有帮助。

【讨论】：