使用過濾器進行搜索，但忽略標點

Question

我爲下面的離子項目編寫了搜索過濾器。它工作正常，但事實上它不會忽略標點符號。

所以，如果我正在搜索一個項目，有一個逗號，我想念逗號的項目，我不會找到它。有沒有辦法讓我告訴過濾器忽略逗號，甚至可能還有其他標點符號？

見下面我舉例的幾個片段：

<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

我希望這將幫助你