How to make Search Bar sticky?

ionic-v1
1

Hi everyone,

What should I do in order to make my search/filter bar stick or stayput while the user scrolls an ion-list? Here’s a precise CodePen for what I’m doing http://codepen.io/junerockwell/pen/ragXWe

I’ve check out this plunkr which I found as an answer to one of the questions in this forum but it didn’t work for me. I even updated the Ionic libraries to the latest rc2 but didn’t get the suggested results when I tried on my code.

2

Is this the kind of sticky search bar you are looking for? Or are you looking for sticky as in the list of iOS contacts like this one?

1 Like
3

You can use a sub-header:

1 Like
4

Or if you want a search bar to overlay your header bar as a service from your js, you can use my filterBar search directive :smile: here

1 Like
5

Thanks @joseadrian, @brandyshea and @djett for really useful answers! Each of your information actually helped me! I have a sticky filter/search bar now.

I love the Ionic Community!

3 Likes
6

per @brandyshea I have changed your template to this and it sticks to the top.

<script id="templates/musicList.html" type="text/ng-template">
 <ion-header-bar class="bar-light bar-subheader">
        <filter-box placeholder="Enter Zipcode" filtertext="search"></filter-box>  </ion-header-bar>
  
  <ion-view view-title="Albums">
    <ion-content>

<ion-list >
  <ion-item ng-repeat="item in items | filter: {Zipcode: search.value}">
    <h3>{{item.City}}</h3>
    <h3>{{item.Zipcode}}</h3>
  </ion-item>
</ion-list>
    </ion-content>
  </ion-view>
</script>

Hope this helps.