Ionic 2 Searchbar

Hi All,

I have 2 questions regarding Ionic 2 searchbar.

  • Is there any way to get expandable search. Like you click on search icon and it expands into search bar.

  • Searchbar that shows it’s own page/search results and darkens the current page. Mostly all apps have this kind of searchbar.
    e.g Facebook, Linkedin, Whatsapp, Apple Mail, Apple App store, Settings app… - When you click on searchbar in these apps, it shows search results differently in it’s own list.


1 Like
  1. Should be possible using animations.
    You can actually just expand/shrink via animations.
    Il gonna Post an example when I’m back from work.

  2. Do you mean Display search results as an popover?

  1. It will be great to have an example.
  2. As I mentioned, lot of apps have that kind of searchbar - Facebook, Linkedin, Whatsapp, Apple Mail, Apple App store, Settings app, Inbox by Gmail…
    It’s difficult to explain but if you have any of above app, it will be easy to understand.

I’d also be interested in an example for #1.

I’d love to see this animated expandable search bar in ionic 2

One more for the example =D

Anybody got an example of how this can be done? I’d love to implement it in my app. @JustMeDaFaq

For reference, I believe @ankushagg93 was referring to the expandable search featured here on google material.

1 Like

I have implemented a persistent search mostly following google design except the search is accessed via a search icon from homepage which pushes a search page. It stores and displays recent searches and highlights searchstring in text when searching.
Can upload a sample project if it would help anyone.


why not @alsco77! :slight_smile: