How to create drop down filter results in ionic

ionic-v1
1

I’ve got an ionic app with a search bar at the top of a webpage/header input. This search bar is a filter that displays subsets of a JSON data array. I’d like for this filter to display its results in a drop down fashion that doesn’t affect the DOM on the rest of the page (that way, if the filter returns a ton of results, a drop down box with its own scrolling option will appear, as opposed to the results pushing down the underlying HTML page).

2

You could add and display an additional ion-scroll-tag with a list of the entries inside.
If you select a filter -> ion-scroll is displayed with a fixed height and scrollbar if the list is to long.

http://ionicframework.com/docs/api/directive/ionScroll/

3

@bengtler will you please create a codepen for this.

4

@mhartington built something in the past.
codepen

You could adapt this for your purpose.
(putting the ion-scroll over the other content).

Give it a try and build an own codepen.

If you are failing at all i will play around with your codepen.

Greetz.

5

@bengtler Here is the codepen http://codepen.io/asadfida/pen/znmCq . It does not show the container
`

  • {{c.name}}
` that i want to show the search result, I don't know the way how to show the search result as a dropdown. So please help me out of this issue. thank you!
6

@bengtler …???

7

You have to set a fixed height to the ion-scroll container.