Geek Answers Handbook

Search at the top of the list in the ionic structure

I am new to the Ionic Framework, so now I'm experimenting with this. On one of my pages, I have a search entry, followed by a list that looks like this:

enter image description here

When I scroll up, the search field scrolls with the list. Is it possible to save the search box at the top of the page while scrolling?

This is my HTML markup so far:

<ion-view view-title="Force"> <ion-content> <label class="item item-input"> <i class="icon ion-search placeholder-icon"></i> <input type="text" placeholder="Search Force" data-ng-model="searchForce"> </label> <div class="list"> <ion-item class="item-icon-right" ng-repeat="force in forces | filter:searchForce" type="item-text-wrap" href="#/tab/force/{{force.id}}"> {{force.name}} <i class="icon ion-chevron-right icon-accessory"></i> </ion-item> </div> </ion-content> </ion-view>
+5
source share
1 answer

To do this, you can use the subtitle:

  <ion-header-bar class="bar-light bar-subheader"> <input type="text" placeholder="Search Force" data-ng-model="searchForce"> <button ng-if="searchForce.length" class="button button-icon ion-android-close input-button" ng-click="clearSearch()"> </button> </ion-header-bar>

Codepen Demo

Also see this post for some alternatives: http://forum.ionicframework.com/t/how-to-make-search-bar-sticky/20721

+14
source

More articles:


All Articles