djett41 / ionic-filter-bar

Filter Bar plugin for the Ionic Framework

#Ionic Filter Bar

A platform specific search filter plugin for the Ionic Framework (iOS / Android)

Table of Contents

• Demo
• Setup
• Usage
• Screenshots

Demo

• Download my sports news app SportScoop on iOS/Android to see it live!! Web Demo | iOS | Android

• Watch the Demo video below

• Download the Demo app on Ionic View with appId: ab56e8bd

  NOTE: On the Ionic View app, KeyboardDisplayRequiresUserAction is not being respected, therefore the autofocus that brings the keyboard up right away does not work. This will work however on a real device or emulator as long as the proper configuration has been setup (see Config section)

• Run the demo source code by cloning the ionic-filter-bar repo, navigating to /demo and running the following

Run the following ommands:

npm install
bower install
gulp

Setup

Install

bower install ionic-filter-bar

Cordova Keyboard config (config.xml)

In order for Ionic Filter Bar to autofocus for iOS and bring the keyboard up when the filter bar animates in, you will need to add the following to your config.xml

<platform name="ios">
    <preference name="KeyboardDisplayRequiresUserAction" value="false"/>
</platform>

I also recommend using the ionic-plugin-keyboard and disabling scroll for the keyboard as well. See the app.js in the Demo for an example on how to configure the Ionic Keyboard in your module's run section.

JS/CSS Imports (index.html)

Include the following JavaScript/CSS file imports in your index.html. Remember to import the ionic libraries first! The example below assumes your 3rd party bower dependencies are located in the default bower_components folder.

<link rel="stylesheet" href="bower_components/ionic-filter-bar/dist/ionic.filter.bar.css">
<script src="bower_components/ionic-filter-bar/dist/ionic.filter.bar.js"></script>

Angular Dependency (app.js)

Add jett.ionic.filter.bar as a module dependency of your app module.

angular.module('Demo', ['ionic', 'jett.ionic.filter.bar'])
  .config(function () {..});

SASS Import (main.scss)

Include the scss/ionic.filter.bar.scss file at the top of your main.scss file as shown below. Import any custom filter bar scss styles below the ionic and ionic.filter.bar scss.

@import
  "path_to_bower_components/ionic/scss/ionic",
  "path_to_bower_components/ionic-filter-bar/scss/ionic.filter.bar";

Usage

$ionicFilterBarConfigProvider

A provider you can inject into your module config that provides a way to customize the filter bar template.

$ionicFilterBarConfigProvider.theme

Allows you to override the ionic theme and color options used to style the filter bar.

@param {string} value Ionic color option.

By default the theme inherits the theme and color options of the ion-nav-bar (defaults to light theme). For example, if you define a bar-positive class on you ion-nav-bar (see demo for example) then the filter bar will automatically have the filter-bar-positive styles. You can override the default behavior by setting the theme to one of the following default Ionic themes listed below.

• light
• stable
• positive
• calm
• balanced
• energized
• assertive
• royal
• dark

@returns {string} value

$ionicFilterBarConfigProvider.clear

filterBar Clear button icon used to clear filter input

@param {string} value Android defaults to ion-android-close and iOS defaults to ion-ios-close.

@returns {string}

$ionicFilterBarConfigProvider.search

filterBar Search placeholder icon shown inside input only for iOS

@param {string} value iOS defaults to ion-ios-search-strong. Android doesn't show placeholder icons

@returns {string}

$ionicFilterBarConfigProvider.backdrop

filterBar backdrop which is shown when filter text is empty

@param {boolean} value Android defaults to false and iOS defaults to true.

@returns {boolean}

$ionicFilterBarConfigProvider.transition

transition used when filterBar is shown over the header bar

@param {string} value Android defaults to horizontal and iOS defaults to vertical.

platform: Dynamically choose the correct transition depending on the platform the app is running from. If the platform is ios, it will default to vertical. If the platform is android, it will default to horizontal. If the platform is not ios or android, it will default to vertical.

@returns {string}

$ionicFilterBarConfigProvider.placeholder

filterBar placeholder text shown inside input.

@param {string} value defaults to Search.

@returns {string}

$ionicFilterBarConfigProvider.favorite

Icon shown in the input filed when favoritesEnabled is true and filter text is empty (same spot as clear button)

@param {string} Android defaults to ion-android-star and iOS defaults to ion-ios-star.

@returns {string}

$ionicFilterBarConfigProvider.close

Icon used for button to close the modal

@param {string} Android defaults to ion-android-close and iOS defaults to ion-ios-close-empty.

@returns {string}

$ionicFilterBarConfigProvider.done

Icon used to when a user is done reordering filter bar favorites

@param {string} Android defaults to ion-android-done and iOS defaults to ion-ios-checkmark-empty.

@returns {string}

$ionicFilterBarConfigProvider.remove

Icon for the item options delete button used to delete a favorite

@param {string} Android defaults to ion-android-delete and iOS defaults to ion-ios-trash-outline.

@returns {string}

$ionicFilterBarConfigProvider.reorder

Icon used for the reorder button

@param {string} Both platforms default to ion-drag.

@returns {string}

$ionicFilterBarConfigProvider.add

Icon used for the add button

@param {string} Both platforms default to ion-ios-plus-outline.

@returns {string}

$ionicFilterBar

A service you can inject in your controller to show the filter bar

$ionicFilterBar.show

Load and return a new filter bar. A new isolated scope will be created for the filter bar and the new filter bar will be appended to the body, covering the header bar.

@returns {function} hideFilterBar A function which, when called, hides & cancels the filter bar.

@param {object} options The options for the filterBar. Properties:

• [Object] items

  The array of items to filter. When the filterBar is cancelled or removed, the original list of items will be passed to the update callback.

• {function=} update

  Called after the items are filtered. The new filtered items will be passed to this function which can be used to update the items on your controller's scope. The text string that was searched on will be passed as the second argument.

• {function=} cancel

  Called after the filterBar is removed. This can happen when the cancel button is pressed, the backdrop is tapped or swiped, or the back button is pressed.

• {function=} done

  Called after the filterBar is shown.

• {object=} scrollDelegate

  An $ionicScrollDelegate instance for controlling the items scrollView. The default value is $ionicScrollDelegate, however you can pass in a more specific scroll delegate, for example $ionicScrollDelegate.$getByHandle('myScrollDelegate').

• {object=} filter

  The filter object used to filter the items array. The default value is $filter('filter'), however you can also pass in a custom filter.

• {function=} expression

  The predicate to be used for selecting items from the items array. This is similar to the angular filter expression function described here, except that the first argument will be the filterText as shown below. Default value is null. NOTE: This property will take precedence over filterProperties. Only one can be defined.

  function (filterText, value, index, array) { return value.propertyName === filterText || value.anotherPropertyName === filterText; }

• {function,true,false,undefined=} comparator

  Determines if the expected value (from the filter expression) and actual value (from the object in the array) should be considered a match. This is the same as the angular filter comparator argument described here.
  Default value is undefined.

• [String] filterProperties

  A string or string array of object properties that will be used to create a filterExpression object for filtering items in the array. All properties will be matched against the input filter text. For example, given the following object in an array of items , and assume the user searches for "fish"

  {name: 'fish', description: 'fish', color: 'blue'}
  
  filterProperties: ['name', 'description'] ... The object will be matched and passed to the array in `update`
  filterProperties: ['name', 'color']       ... The object will NOT be matched or passed to the array in `update`
  

  NOTE: If expression is defined, filterProperties will have no effect. Only one can be defined. Default value is null.

• {boolean=} debounce

  Used to debounce input so that the filter function gets called at a specified delay, which can help boost performance while filtering. Default value is false

• {number=} delay

  Number of milliseconds to delay filtering. Default value is 300ms. The debounce option must be set to true for this to take effect.

• {string=} cancelText

  The text for the iOS only 'Cancel' button. Default value is 'Cancel'.

• {boolean=} cancelOnStateChange

  Whether to cancel the filterBar when navigating to a new state. Default value is true.

• {string=} container

  The parent container to append the filter bar to. The default container is the HTML body, however this can be customized by passing in the following supported container classes

  • .modal (Appends to a modal)
  • .menu-content (Appends to the content section of a side menu. Useful when the expose-aside-when attr is set.)

NOTE: The favorites feature is not stable. There is a bug with the keyboard/input focus that needs to be resolved

• {string=} favoritesEnabled

  Toggles the favorite searches feature. If true, a user will be able to see a list of favorite search terms. Default value is 'false'.

• {string=} favoritesTitle

  The header bar title for the favorites modal. Default value is 'Favorite Searches'.

• {string=} favoritesAddPlaceholder

  The placeholder for adding a new search term. Default value is 'Add a search term'.

• {string=} favoritesKey

  The key used for saving search terms in local storage. Default value is 'ionic_filter_bar_favorites'.

Screenshots

ionic-filter-bar's Issues

Filtering

Thanks for the awesome plugin. I have a question about filtering.
Current filter matches All properties defined in filterProperties. Any idea how to set up for any property match?

How to set my custom bar style?

Hey, thanks for build this very useful component! Now I need your help.

I have this code:

<ion-nav-bar class="bar-custom">
    <ion-nav-title>{{ viewTitle }}</ion-nav-title>

    <ion-nav-buttons data-side="right">
        <a class="button button-clear button-icon ion-plus"
            ui-sref="cliente.insert">
        </a>
        <button class="button button-clear button-icon ion-android-search"
            ng-click="showFilterBar()">
        </button>
    </ion-nav-buttons>
</ion-nav-bar>

And I want to set my own bar style.

filterProperties as Array doen't work

$ionicFilterBar.show({
items: items,
update: function (filteredItems) {
$scope.events = filteredItems;
},
filterProperties: ['toto', 'tata']
});

Doesn't return the right items.

With only one property it returns 3 items with 2 properties (['toto', 'tata']) it returns 0 items for the same keyword..

Access to filter string

Hi,

I'm wondering if/how it is possible to access the filter string. Maybe I missed something, but I did not find an option to operate on the filter string.

In particular, I want to switch views, depending on the size of the filter string. For instance, if the length of the filter string is zero, I need to display a trending searches view.

Ingo

Miss : provide a way to close the search bar

I may have missed something but in my case i clearly need to close the search-bar anytime i want.

Filter data from promise instead of array

is there a way to get the items array from a promise function?

What i'm trying to do is get the search term from ionFilterBar and call my backend server to get the the array that i need to pass to items array.

Thanks

Keyboard on device causing issues with favorites modal

A few issues with the new favorites feature I have noticed

• When clicking the favorites icon, the filter bar will not lose focus (or maybe regains) even after calling input.blur(), or trying ionic.DomUtil.blurAll(). Not sure why but it won't lose focus which causes the modal to look nasty.
• The modal header is pushed out of the screen when the modal comes up. Also the keyboard from filterbar shows over top of the modal. I have played with overflow and z-index none which seem to work. This may be a result of #1?

Need to get some time to check this out but until then, I will set the favoritesEnabled to false by default

How to Filter Items Properly

Do I have to structure my objects in any particular way for the filtering to work? I have an array of players. Each player looks like:

{first_name: "john", last_name: "smith"}

My code looks like...

$scope.showFilterBar = function () {
      filterBarInstance = $ionicFilterBar.show({
        items: $scope.players,
        filterProperties: ["first_name", "last_name"],
        update: function (filteredItems, filterText) {
          $scope.players = filteredItems;
          if (filterText) {
            console.log(filterText);
          }
        }
      });
    };

But, I am getting no results back when I start typing a name that exists in my list. Any tips?

Some problem

I already tested your plugin and really cool but got some problem like below:

• Why Nav- bar cannot hide after click search icon and cannot doing vertical transition like my screenshot below:
  
  Its my template HTML:

  <ion-view cache-view="false" view-title="Quotation List">
   <ion-nav-buttons side="secondary">
  <button class="button-icon icon ion-ios-search assertive" ng-click="showFilterBar()">
   </button>
  </ion-nav-buttons>
   <ion-content padding="true"> 
     <div class="list">
         <button class="button button-block button-assertive" ng-click="showDetails()">
     <b>Create New Item</b>
          </button>
            </div>
        </ion-content>
      </ion-view>
  

How I can fix it?

• How I can add more filter Properties not just one single item to show when searching. Example: I want show "price" item instead "name" item?

How to use it with promise?

How can i use this awesome filter bar from a promise?

Search text with translation

I was trying to make the 'Search' text to be translated using angular-translate but with the Ionic-filter-bar is only possible to change the placeholder text in the app.config() phase (requires access to the provider) but in this stage the '$filter' and '$translate' are not available yet.

Do you have any idea how to address this ?

Make theme inherit theme and color options of ion-nav-bar

Theme should be consistent with ion-nav-bar so you aren't required to set the theme.

For example, as in the demo index.html, if the ion-nav-bar directive has a "bar-positive" css class, the filter bar should automatically inherit the theme and have a filter-bar-positive class.

Then you should be able to override this default behavior by configuring a theme as usual, say if you wanted the filter bar to be a different theme than the ion-nav-bar

expression function is not receiving filterText param as in docs

Filter on several attributes

Hi,

I would like to know if it is possible to filter not only on 1 attribute, but on several like :

       filterProperties: ['title','description']  // This doesn't work

So, if one of the 2 attributes contains what's in the textFilter, then it's kept in the list.

Thank you & kind regards

Issue with non-clickable search bar when used in ionic modal

I'm using the filter bar in a ionic modal to filter through a collection-repeat list of items.

The search bar can be clicked initially and shows as usual but both input and cancel button cannot be clicked.

Any ideas?

Thanks

Choose placeholder text in service options and not only in config

I am using angular-translate, my Ionic app can change languages while running.
I need to change placeholder text dynamically.
Cancel text I can change without problem in service options, please add placeholder too...

filterProperties example

I'm trying to set filtering properties of my object, but it's not working. This is my code:

• Array of objects

[{
    ID: "11944", 
    NAME: "ANNA PATRICIA", 
    RAZAO_SOCIAL: "ANNA PATRICIA", 
    CNPJ: "27442367000111"
}, {
    ID: "11943", 
    NAME: "BEBIDAS IPIRANGA", 
    RAZAO_SOCIAL: "BEBIDAS IPIRANGA", 
    CNPJ: "16227158000139"
}]

• Filter bar function

$scope.showFilterBar = function() {
    $ionicFilterBar.show({
        items: $scope.clientes,
        filterProperties: ['ID', 'NAME', 'CNPJ'],
        cancelText: 'Cancelar',
        update: function(filteredItems) {
            $scope.clientes = filteredItems;
        }
    });
}

What are I doing wrong?
Can you give me an example?

My Searchbar show Web control and not filter by text

Hi Djett

Thanks for supporting
My Searchbar is showing but i have 3 problem:

• My filter list not show when type text in searchbar, i have debug have text in filter input & have items list object ... but list filter not show
• I can't include $ionicFilterBarConfigProvider in app.js, it show error not found, but my searchbar can show, and i have import js/css like your guide.

Please help me solve this case.

(enhancement) remove wrapping of jqlite elements and just use DOM

since we get a jqLite wrapped element back from compiling the directive its ok to use that to perform jqLite operations, however there is no need to wrap other elements in angular.element since we cn just use DOM (body, scroll container, container)

There is a bug when using ionic filter bar inside a modal.

Filter bar inside a modal doesn't close automatically when I click out or in cancel button.

Ionic header bar is pushed down in android

Thank you for the great plugin. However I have problem with android header bar being pushed down when input appears. By the way, it works perfectly in iOS.

Works perfectly in iOS! The header is under the search bar.

Header is pushed down. The header is created using ion-header-bar in a ion-side-menu.

Filter bar takes up the whole page width when sidemenu is visible

When using ion-side-menu on a tablet and the side menu is visible using 'expose-aside-when' property, the filter bar takes up the whole width of the display instead of just the nav-bar.

Make a search bar - Not only filter given items

Hello,

I'm currently using your plugin for an Ionic project, and I really like it!
I'm using your plugin to filter a given set of items, but now I'd like to perform a search on a database.

For now, I'm using something like this:

$scope.events = var events = Events.getFuture();

$scope.showFilterBar = function () {
  filterBarInstance = $ionicFilterBar.show({
    filterProperties: 'name',
    items: Events.all(),
    update: function (filteredItems) {
      $scope.events = filteredItems;
    },
    cancel: function () {
      $scope.events = events;
    }
  });
};

So basically I'm displaying all future events on my page, but do a search on all events, and when the filter bar is canceled I just put my old list of events back.
This is working for now, but my events list won't stop growing, and I don't think I'll be able to afford to load all events in memory just to filter them in the future.

Would it be possible to create an options in $ionicFilterBar.show that would take filterText as parameter and return the list of items that match the search term?
So that I could have something like:

$scope.showFilterBar = function () {
  filterBarInstance = $ionicFilterBar.show({
    search: function (filterText) {
      $scope.events = Events.searchByName(filterText);
    },
    cancel: function () {
      $scope.events = events;
    }
  });
};

I don't think that this is possible with the current implementation.
Thanks!

Support for custom filter function

Hi. Thanks for your work. It has been very useful. This is not really an issue but I think there should be a way to supply a custom filter function, which gets called with the arguments filterText, item, index, array and returns true if item passes.
It would be easy to do. If filterProperties is a function then bind filterText as an argument and pass it to angular filter. Something like this maybe:

          scope.filterItems = function(filterText) {
            var filterExp, filteredItems;

            // pass back original list if filterText is empty.  Otherwise filter by supplied properties, or filterText
            if (!filterText.length) {
              filteredItems = scope.items;
            } else {
              if (angular.isFunction(scope.filterProperties)) {  
                filterExp = angular.bind(this, scope.filterProperties, filterText);  
              } else if (angular.isArray(scope.filterProperties)) {
                filterExp = {};
                angular.forEach(scope.filterProperties, function (property) {
                  filterExp[property] = filterText;
                });
              } else if (scope.filterProperties) {
                filterExp = {};
                filterExp[scope.filterProperties] = filterText;
              } else {
                filterExp = filterText;
              }

              filteredItems = scope.filter(scope.items, filterExp);
            }

            $timeout(function() {
              scope.update(filteredItems);
              scope.scrollItemsTop();
            });
          };

Issue with .transition('horizontal')

I must say, I really like your component so far.
The ability to customize so many things is very nice and I am stilling testing the component.

The problem I faced is when using the transition 'horizontal' with $ionicFilterBarConfigProvider.
Take a look at the img:

(feat) Favorites

Store favorite search terms in local storage in which a user can add, remove, and reorder. clicking on the search term will filter the items with that search term

close keyboard when the user hits "return"

It would be nice if the keyboard closed after the user hits return. I believe if you put it in

tags and give it an ng-submit= that calls the closeKeyboard() function, it would work.

opacity and translate3d() behavior...

Can you help me understand what's going on here?
I have two copies of my app (one with ionic-filter-bar and one without). In the app with ionic-filter-bar, when I click a list item it transitions to the next state correctly. When I click the back button, the app returns to the original state, but this time with the nav bar opacity=0 and translate3d with a large value.
Code in tabs.html

<ion-nav-view title="Home" icon="icon ion-home" name="index-tab" href="#/tab/index"></ion-nav-view>
  </ion-tab>

Here is the before(Safari-view source):

<div class="title title-center header-item" style="left: 56px; right: 56px; -webkit-transform: translate3d(0px, 0, 0);">Welcome</div>

Here is the after (back button pressed, Safari-view source):

   `<div class="title title-center header-item" style="left: 56px; right: 56px; -webkit-transform: translate3d(700.6224975585938px, 0px, 0px); opacity: 0;">Welcome</div>`

Any ideas? I'm new to ionic and right now I'm assuming that this is caused by ionic-filter-bar because the other copy of the app (without ionic-filter-bar) is functioning.

$ionicfilterBarConfigProvider not available

Love the directive, but it appears the documentation doesn't match the code. There is no "$ionicfilterBarConfigProvider" available for injection. There is a '$ionicfilterBarConfig', but it doesn't allow for easy theme switching as the documents suggest. Also, the default theme is set to 'positive', not 'light' or 'stable' as needed.

[Question] Where to add $ionicLoading when search process is ongoing ?

Hello,

I have a very big list of items to filter, then it take very long to render.

[Question] Where to add $ionicLoading when search process is ongoing ?

thank you very much.

Add attr 'id' in the actual <input>

I think it's a bit simple and optional for users. I think it's best to have this feature.
Just a new method in $ionicFilterBarConfig.id()

Thanks

Set filter programmatically? How?

Is it possible right now to set the filter via programming?

Is know there is a "filterText" which gives my the text entered char by char in the search text field.
But how can I set this programmatically?

-> For example, if I have a linke / button to push to set the filter to "test1"

User interface:

+========================+
 [ test 1                 (x)   ]  <- ionic-filter-bar 

+-------------------------+

   [ Button "test 1" ] ->   open filter bar and set filtertext to "test 1"
   [ Button "test 2" ] ->   open filter bar and set filtertext to "test 2"
   [ Button "test x" ] ->   open filter bar and set filtertext to "test x"
+========================+

So it should be possible to pre programm a link (button) with for example:

Link:

/www/index.html#/tab/search?filterText="test 1"

So when someone presses the button it opens ionic-filter-bar with "test 1" as a filter text and do the filtering as if one typed in the text.

  $scope.showFilterBar = function () {
    filterBarInstance = $ionicFilterBar.show({
      delay: 1000,
      cancelText: "<i class='ion-ios-close-outline'></i>",
      items: $scope.items,
      update: function (filteredItems, filterText) {
        $scope.items = filteredItems;
        if (filterText) {
          console.log('*** filterText:', filterText);
        }
      }
    });
  };

Cursor input flick when show animate is start.

When run function $ionicFilterBar.show() the cursor is visible and blink with vertical animate.

How can i disable focus while animation?

Publish to npm

Publish ionic-filter-bar to npm so that it can be require'd by those who use browserify.

Filter on nested properties

Hello,

i have an array of objects and each one has some nested objects. I would like to filter on nested properties but filtering using filterExpression seems to filter only on first level properties. I would like to do something like that : filterExpression : "nestedObject.property" but it does not work!
Is that possible;

Thanks!

Enhancement: Allow Placeholder Text and Theme to Be Defined On Show

Is there currently any way to change the placeholder text when creating and instance of the filter bar? I have a need for two separate filter bars with different placeholder text and styling.

filterBarInstance = $ionicFilterBar.show({
      items: $scope.inventory,
      update: function (filteredItems) {
        $scope.inventory = filteredItems;
      },
      filterProperties: 'term',
      placeholder: "Category",
      theme: 'assertive'
    });

[String] filterProperties - Multiple properties

Hi there,

I'm not sure if this is included in the release but is it possible to search through multiple properties, whereby the 'search string' can match one Filter Property out of an array of multiple Filter Properties and display the results, rather than the 'search string' having to match all filter properties.

Thanks

Edit: My apologies... I found the answer in a closed issue which is to remove filterProperties. Thanks

Filter bar covers modal header

i want to open a modal when an item is clicked from the filtered list, it works fine, but the search bar is displayed on top of the modal' header, i cant see the buttons on modal view, is there any way to show modal header to the front so the search bar will be coverd

The Keyboard + The bar disappear instantly when a button to activate the filter bar

Hi guys,

I'm facing some issues recently with this module on a real device (Iphone ios 8), when I click on the button to activate the filter bar, the bar + the keyboard appear and disappear instantly.

Any idea what can be the issue ?

Thx in advance?

Pre-load filter text & save search result states

Any plans yet for pre-loading a filter text (1) and saving the state of search result (2) [(2) could actually be implemented through (1)).

Motivation: In order to provide a convenient entry point for user's to use the search functionality, an app may provide a list of trending searches, that, if picked by a user, preloads the search filter. This my be an addition to my other issue (#24) and could actually require to realize access to the filter text both read and write.

Some lag in opening the bar on some devices because of input focus.

Hi,
First let me say I like your component and you did a great job. I'm trying to write some component's like you, and yours is a good starting point to improve.

The issue, in some devices the animation of the bar entering is laggy because of the focus happening when the bar is animating,
I've put an timeout in the focus to let the animation finish before it focus the input, and feels much better now. Maybe is something you can add to your component. Sorry i'm a newbie here, maybe i could try to contribute instead.

Great job btw and thank you.

Disable autocapitalize

Hi, I've been trying to disable the autocapitalize but the only way I know is the 'autocapitalize="off"', inside the input.
Do you have any suggestion of how can we deal with this?

Thanks!

Custom Filter

I was using the regular search bar to filter but instead of the regular:

collection-repeat="item in array | filter: data.searchQuery

I created a custom filter that ignores punctuations when searching:

collection-repeat="item in array | filterPunctuation: data.searchQuery

However this module only supports a simple filter like the first one listed above.
Would it be possible to create a custom filter?

Here is an example of my filter:

.filter('filterPunctuation', function() {
  return function(items, searchTerm) {
    //ignore empty searches
    if (!searchTerm || '' === searchTerm) {
      return items;
    }
    //remove unwanted symbols search term and make lowercase
    searchTerm = searchTerm.replace(/[^\w\s]|_/g, "").toLowerCase();
    return items.filter(function(element, index, array) {
      //remove html characters, and punctuations from title and body properties then convert to lowercase
      var title = element.title.replace(/(<([^>]+)>)/ig, "").replace(/[^\w\s]|_/g, "").toLowerCase();
      var body = element.body.replace(/(<([^>]+)>)/ig, "").replace(/[^\w\s]|_/g, "").toLowerCase();
      return title.includes(searchTerm) || body.includes(searchTerm);
    });
  }
});

Accent-insensitive search breaks with spaces

With data that contains both spaces and accents, we ran into the following problem:
For example, if we have this in our database: "Tëst Dátà"
And search for "Test" or "Data", it will show "Tëst Dátà" (as was probably the user's intention).
However, if you search for "Test Data", it doesn't show "Tëst Dátà", so adding spaces to the query somehow messes with its accent-insensitivity. I'm assuming this behaviour isn't as intended.

Is it possible to set a default value to filterText when opening the search bar?

My list of items has hash tags (e.g. #openIssue, #needsAssistance, #urgent) that, when clicked, filter the list of items.

After clicking a hash tag, can I open the search bar with that hash tag as the filterText? Or modify the filterText if someone clicks a hashtag in the middle of another search?

Many thx for this awesome module,
Jordan

$ionicFilterBar.hide() maybe?

Essentially, I have a list of products and a shopping cart. Each has its own UI state. And each view is collection-repeat.

When viewing products and using $ionicFilterBar it works as expected. However, when clicking an item, it adds the product to the shopping cart and the redirects to shopping cart. When redirecting I get an error in the products collection repeat - it seems be closing the $ionicFilterBar before redirecting is required?

The error starts off as:

Error: collection-repeat tried to compute the height of repeated elements "product in products", but was unable to. Please provide the "item-height" attribute. http://ionicframework.com/docs/api/directive/collectionRepeat/
at HTMLElement.refreshDimensions (http://localhost:8100/lib/ionic/js/ionic.bundle.js:50732:17)

[Question]

Hello,
Thank you for your amazing work !!

I would like to filter 2 datasSets at the same time.
How can I use ionic-filter-bar to impact 2 lists ?

Thank you
Ron

'transition' mixin not included in SASS files

Compiling ionic.filter.bar.scss throws an error on line 31
"@include transition(opacity 150ms ease-in-out);"

search results best way

I am using this but have a problem, hope you guys can help. Looks like you have not seen this.

1. after making it work on the browser (works fine) i built and ran it in the XCode Simulator, keyboard wont show up, used my computer keyboard and entered the search text, no results showup

2. installed on my iphone. keyboard come up with the search results wont show up.

let me know if there is a better way please..

Search input need double press

To enter a search string I need to double press into the input field. After the second click into the input field the keyboard is shown and the input field is focused. Does anyone else see this too? (running on iOS 8.4)