Выполните поиск, используя фильтр, но игнорируя знаки препинания

0

Я написал фильтр поиска для ионного проекта ниже. Он отлично работает, но для того, чтобы он не игнорировал пунктуации.

Поэтому, если элемент, который я ищу, имеет запятую, и я пропускаю запятую, я ее не найду. Есть ли способ сообщить фильтру игнорировать запятые и, возможно, даже другие пунктуации?

См. Несколько фрагментов моего примера ниже:

<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"
}, ...
Теги:
ionic-framework
angularjs-filter
ionic

2 ответа

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 с использованием функции

  2. Вы также можете создать настраиваемый фильтр углов:

    <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 с использованием фильтра

В обоих случаях я использую регулярное выражение для фильтрации всей пунктуации из условия поиска и свойства hymn, а затем я конвертирую их оба в нижний регистр, чтобы пользователь не вводил его точно так, как есть. Существует много разных способов сделать это. Надеюсь это поможет!

Поделиться
  • 2
    Вы, мой друг, одна удивительная машина кодирования человека!
  • 0
    Это решение, к сожалению, ограничено Chrome и Firefox, потому что оно использует функцию include developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… так что, к сожалению, оно не будет работать для моего приложения ionic-frameowork, я был бы признателен если бы вы могли предложить альтернативный метод
Показать ещё 1 комментарий
0

Вы можете сделать это

<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

Я надеюсь, что это поможет вам

Поделиться
  • 0
    Как это отвечает на мой вопрос о игнорировании знаков препинания?
  • 0
    вы можете видеть в plunker есть пример ЛЮБОГО, в котором значение состоит из '-' и оно доступно для поиска
Показать ещё 1 комментарий

Ещё вопросы

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