Ionic 2 Searchbar

Ionic Framework ionic-v3
1

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.

-Thanks

1 Like
2

  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?

2 Likes
3
  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.
4

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

5

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

6

One more for the example =D

7

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
10

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.

2 Likes
11

why not @alsco77! :slight_smile: