Scroll up to hide search bar

@dccil wrote:

I have a page where when you pull the page down, a search bar will show up. This works out well, however, I would like to add the functionality of scrolling the page up to hide to search bar. I also noticed that I am unable to scroll the page when searching or even after the search or cancel the search. How can I cancel the search and hide the search bar?

page.html

  <ion-refresher (ionRefresh)="doRefresh($event)"><ion-searchbar [(ngModel)]="searchInput" (ionInput)="getItems($event)"></ion-searchbar></ion-refresher>
    <ion-list *ngIf="searchInput !== ''">
      <ion-item *ngFor="let item of items" (click)="navToSearchedProfile(item._id)">
        {{ item.profile_name }}
      </ion-item>
    </ion-list>

page.ts

export class Page {

  searchQuery: string = '';
  items = [];
  profiles: any;
  searchInput='';
  _id: any=[];

  constructor(public navCtrl: NavController,
              public navParams: NavParams,
              public db: Database) {
                  this.db.read().then(data => {
                    this.profiles = data;
                    this.initializeItems();
                  });
                }

//search bar
  doRefresh(refresher) {
    console.log('Show Searchbar', refresher);
  }

  initializeItems() {
    this.items = this.profiles;
  }

 getItems(ev) {
    this.initializeItems();
    var val = ev.target.value;
    if (val && val.trim() != '') {
      this.items = this.items.filter((item) => {
        return (item.profile_name.toLowerCase().indexOf(val.toLowerCase()) > -1);
      })
    }
  }

  navToSearchedProfile(_id){
    this.navCtrl.push(ProfilePage, {_id: _id});
  }
//end search

Posts: 1

Participants: 1

Read full topic