New Filter/Search directive. see animated gif / source. Testers appreciated ;=)

1

I have seen quite a few requests for search/filter directives, including myself. I created a ionFilterBar directive, similar to to ionActionSheet, which you call via a service from your controllers. You can pass many options into the show method including ability to debounce input, filter properties, custom filter, etc… and ability to configure items in ionicConfig such as themes/ionic color options, icons, transitions, backdrop etc…

For a demo of how this works in ios/Android see the animated gif http://makeagif.com/i/EZ-klS

Anyone interested in checking it out more details, or want to vote for it go to https://trello.com/c/KldV1zQK/26-ionsearch-for-items

For source, go to my forked repo (forked only for this feature https://github.com/djett41/ionic ). follow the README to run tests/docs locally too.

I only have a Galaxy S3, iPhone6, and an iphone4s that has some issues lol so any testers would be appreciated!!

5 Likes
2

One additional thing related to filtering. I know there is a limitation in Cordova with binding an action to the keyboard search button, but is there a way we would change the text of the keyboard to something other than “Search”? Can we hide the specific button? Never played around with this so let me know if you have any info on this

3

hi, thanks for this directive, it appears to be great, but can you show here how to really add it to an ionic app, I tried to read the doc on the git repo but it a bit long, this why I ask you to show step by step integration.

thank you

4

Thanks @bab55z sure hopefully I’ll get some time this or next week and put that together.

1 Like
5

Hi, it’s so great feature. @djett I would also need to know how I would add in my application. Thanks.

1 Like
6

@joseguilhermeha @bab55z Sorry been MIA for a little.

You can install the filter bar via bower

bower install ionic-filter-bar

Also check out the repo, I’ll update the docs even more in the near future but there should be enough for you to understand how it works. I also added a demo to the demo folder so check that out as well.