使用过滤器进行搜索，但忽略标点符号

Question

我为下面的离子项目编写了一个搜索过滤器。它工作正常，但它不会忽略标点符号。

因此，如果我正在搜索带有逗号的项目并且我错过了逗号，我将找不到它。有没有办法告诉过滤器忽略逗号甚至其他标点符号？

请参阅下面我的示例的一些 sn-ps：

<input class="search-bar" type="search" placeholder="Search" ng-model="data.searchQuery">
<ion-list>
  <ion-item  collection-repeat="hymn in hymns | filter: data.searchQuery">
    <h2><b>{{hymn.number}}. </b>{{hymn.title}}</h2>
  </ion-item>
</ion-list>

Javascript

var hymns = [
{
    "body": "I've written a body, it has punctuation too;\n",
    "number": 1,
    "title": "This Title, has a comma! and puctuations"
}, ...

Answer 1

1. 您可以调用一个函数来过滤项目：

   <ion-item collection-repeat="hymn in hymns | filter: myCustomFilter">
       <h2><b>{{hymn.number}}. </b>{{hymn.title}}</h2>
       <p>{{hymn.body}}
   </ion-item>
   

   然后在控制器中定义：

   $scope.myCustomFilter = function(hymn) {
       var searchTerm = $scope.data.searchQuery || '';
       searchTerm = searchTerm.replace(/[^\w\s]|_/g, "").toLowerCase()
   
       var hymnTitle = hymn.title.replace(/[^\w\s]|_/g, "").toLowerCase();
       var hymnBody = hymn.body.replace(/[^\w\s]|_/g, "").toLowerCase();    
   
       return hymnTitle.indexOf(searchTerm) > -1|| hymnBody.indexOf(searchTerm) > -1;
   }
   

   Codepen example using function

2. 您还可以创建自定义 Angular 过滤器：

   <ion-item collection-repeat="hymn in hymns | filterPunctuation: data.searchQuery">
       <h2><b>{{hymn.number}}. </b>{{hymn.title}}</h2>
       <p>{{hymn.body}}
   </ion-item>
   

   然后像这样定义过滤器：

   .filter('filterPunctuation', function() {
     return function(items, searchTerm) {
       if (!searchTerm || '' === searchTerm) {
         return items;
       }
   
       searchTerm = searchTerm.replace(/[^\w\s]|_/g, "").toLowerCase();
   
       return items.filter(function(element, index, array) {
         var title = element.title.replace(/[^\w\s]|_/g, "").toLowerCase();
         var body = element.body.replace(/[^\w\s]|_/g, "").toLowerCase();
         return title.indexOf(searchTerm) > -1 || body.indexOf(searchTerm) > -1;
       });
     }
   })
   

   Codepen example using filter

两种方式我都使用正则表达式从搜索词和赞美诗属性中过滤掉所有标点符号，然后我将它们都转换为小写，这样用户就不必完全按照它是。有许多不同的方法可以做到这一点。希望这会有所帮助！

Answer 2

你可以这样做

<input class="search-bar" type="search" placeholder="Search" ng-model="data.$">
<ion-list>
  <ion-item  collection-repeat="hymn in hymns | filter: data">
    <h2><b>{{hymn.number}}. </b>{{hymn.title}}</h2>
  </ion-item>
</ion-list>

plunker:http://plnkr.co/edit/I9XEk7ebBeWbzQtwdMPv?p=preview

希望对你有帮助