CODEWITHSUNDEEP
angularjsionic-frameworkangularjs-filter
frazras
frazras

Reputation: 6488

Do a search using filter but ignoring punctuations

I wrote a search filter for an ionic project below. It works fine but for the fact that it does not ignore punctuations.

So if the item i am searching for an item that has a comma and I miss the comma I won't find it. Is there a way for me to tell the filter to ignore commas and maybe even other punctuations as well?

See a few snippets of my example below:

<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"
}, ...

Upvotes: 0

Views: 672

Answers (2)

Brandy Carney
Brandy Carney

Reputation: 1186

  1. You could call a function to filter the items:

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

    Then define it in the controller:

    $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. You could also create a custom Angular filter:

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

    Then define the filter like this:

    .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

Both ways I am using a regular expression to filter out all of the punctuation from the search term and the hymn property, and then I am converting both of them to lower case so the user doesn't have to type it exactly as it is. There are many different ways you can do this. Hope this helps!

Upvotes: 2

Shubham Nigam
Shubham Nigam

Reputation: 3944

You can do like this

<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

I hope this will help you

Upvotes: 0

Related Questions