How to create drop down filter results in ionic

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).

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.

@bengtler will you please create a codepen for this.

@mhartington built something in the past.

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.


@bengtler Here is the codepen . It does not show the container

  • {{}}
` 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!

@bengtler …???

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