leob
Looks like something I really want in my app, keen to try it out, will let you know once I've tried it.
Ionic Filter Bar
A platform specific search filter for the Ionic Framework
Free!
Devin Jett
Member since 2014
Details
- Version:
- 1.0.5
- Size:
- 0mb
- Ionic:
- 1.0 beta 14,1.0.0,1.0.1
- Platforms:
- iOS, Android
- View ID:
- ab56e8bd
- Released:
- 9 years ago
- Updated:
- 8 years ago
- Category:
- Plugins
- Tags:
- filter, search, ion-nav-bar, ionic-filter-bar, ionic
Ionic Filter Bar
Ionic Filter Bar is an Ionic plugin that allows you to easily add search functionality to your Ionic app. Supported on both iOS and Android, Ionic Filter Bar will animate in and cover the ion-nav-bar. Ionic Filter Bar also comes equipped with many configuration options plus a sass file for sass customizations.
Download my app SportScoop for iOS and Android to see Ionic Filter Bar in action!!
iOS App Store
Android Google Play
SportScoop web preview
Also Watch the Demo video below!!
Documentation
For Usage, Documentation, or to report an Issue visit Ionic Filter Bar on Github
NOTE
On the Ionic View app, the search input is not autofocusing on iOS, which is responsible for bringing up the keyboard at the same time the filter bar animates in.
Hey there! You'll need to log in before you can leave a comment here.
Damien O Neill
Hi Devin, This looks great but I was wondering is it possible to add the ability to filter a list by different options in a number of dropdown boxes? Each list item would have different options from the select boxes to determine the results. Cheers Damien
Stewart McCoy
I'd like to second Damien's comment. Also, that's the functionality that I was expecting not search. I would recommend re-naming this plugin to 'Ionic Search Bar' instead :)
Devin Jett
Thanks guys! Damien I'm not sure if I'm following you, could you put in a feature request and maybe have some screens that show what you are referring to? Stewart the reason it's a filter bar rather than search is because it's basically filtering a list of supplied items using an angular filter (or custom filter/filter expression). So it behaves just like a filter you would put on ng-repeat, rather than an actual search that hits an API
Damien O Neill
Hey Devin, sure, I can do that. Where can I put my feature request and I will give some additional information/screenshots?
Matthew Brookson
Great plugin! I came across this slight issue with styling... On my Nexus 5, when the filter bar is open, a line appears between the search and the tabs underneath. To combat this I had to add some css as follows: .filter-bar-wrapper { .bar.bar-header { background-image: none; } }
Nic Myers
It's great for filtering data and certainly one of the best cross platform ionic plugins for this. It would be great to expand this to include custom search functions in addition to filtering.
Patrick Sullivan
Hey, does this work as more of a "Search" than a filter as well? Like submitting a search type use?
Gino Côté
Sorry, but i do not understand so much code for so little. some css et js you do the trick with not more than 100 line of code.
Devin Jett
Nice Gino glad you were able to accomplish the same functionality in only 100 lines of JS and SASS! I would love to see your implementation and see where I can chop off some lines. Send me the link thanks!
Devin Jett
Sanjeev Kumar Gadamsett and Jooyoung Jung take a look at my github page which goes over the instructions on how to use and how to incorporate into your app, theres also Demo code that will show how its used! Thanks!
sziw
who can help me??? i post my question on http://stackoverflow.com/questions/35794090/how-can-i-filter-with-ionicfilter-bar/35795484#35795484 lease i need a help. thanks
Matteo
Hello! How can I use $ionicFilterBarConfigProvider outside the app.config? For example change the theme runtime. Thanks ;)
chirag
nice plugin, but having one problem in items and filterProperties. what if items have multiple array in that. then how to do filtering in that items. like, vm.menu = [ [{name:1}, {name:2}, {name:3}, ], [ {name:4}, {name:5}, {name:6}] i want to search name property and my 'items' property is vm.menu please help.... ]
chirag
nice plugin, but having one problem in items and filterProperties. what if items have multiple array in that. then how to do filtering in that items. like, vm.menu = [ [{name:1}, {name:2}, {name:3}, ], [ {name:4}, {name:5}, {name:6}] i want to search name property and my 'items' property is vm.menu please help.... ]
Matteo
Hello! How can I use $ionicFilterBarConfigProvider outside the app.config? For example change the theme runtime. Thanks ;)
sziw
who can help me??? i post my question on http://stackoverflow.com/questions/35794090/how-can-i-filter-with-ionicfilter-bar/35795484#35795484 lease i need a help. thanks
Devin Jett
Sanjeev Kumar Gadamsett and Jooyoung Jung take a look at my github page which goes over the instructions on how to use and how to incorporate into your app, theres also Demo code that will show how its used! Thanks!
Devin Jett
Nice Gino glad you were able to accomplish the same functionality in only 100 lines of JS and SASS! I would love to see your implementation and see where I can chop off some lines. Send me the link thanks!
Gino Côté
Sorry, but i do not understand so much code for so little. some css et js you do the trick with not more than 100 line of code.
Damien O Neill
Hi Devin, This looks great but I was wondering is it possible to add the ability to filter a list by different options in a number of dropdown boxes? Each list item would have different options from the select boxes to determine the results. Cheers Damien
Patrick Sullivan
Hey, does this work as more of a "Search" than a filter as well? Like submitting a search type use?
Nic Myers
It's great for filtering data and certainly one of the best cross platform ionic plugins for this. It would be great to expand this to include custom search functions in addition to filtering.
Matthew Brookson
Great plugin! I came across this slight issue with styling... On my Nexus 5, when the filter bar is open, a line appears between the search and the tabs underneath. To combat this I had to add some css as follows: .filter-bar-wrapper { .bar.bar-header { background-image: none; } }
Damien O Neill
Hey Devin, sure, I can do that. Where can I put my feature request and I will give some additional information/screenshots?
Devin Jett
Thanks guys! Damien I'm not sure if I'm following you, could you put in a feature request and maybe have some screens that show what you are referring to? Stewart the reason it's a filter bar rather than search is because it's basically filtering a list of supplied items using an angular filter (or custom filter/filter expression). So it behaves just like a filter you would put on ng-repeat, rather than an actual search that hits an API
Stewart McCoy
I'd like to second Damien's comment. Also, that's the functionality that I was expecting not search. I would recommend re-naming this plugin to 'Ionic Search Bar' instead :)
leob
Looks like something I really want in my app, keen to try it out, will let you know once I've tried it.
Hey there! You'll need to log in before you can leave a rating here.
Aaron
Nice
Tim Carlson
Just what I needed and very straightforward implementation.
Matthew Brookson
Nice design, super simple and easy implementation. I made my own rubbish search filter a while ago but this is exactly what I was looking for, thanks!
Ohad Galor
very easy to use and implement! works grate! grate job=]
Samuel Paredes
So useful!
{{ rating.comment }}
{{ rating.comment }}
Samuel Paredes
So useful!
Ohad Galor
very easy to use and implement! works grate! grate job=]
Matthew Brookson
Nice design, super simple and easy implementation. I made my own rubbish search filter a while ago but this is exactly what I was looking for, thanks!
Tim Carlson
Just what I needed and very straightforward implementation.
Aaron
Nice