How to get the value of searchbar in infinite scroll function

Ionic Framework ionic-v3
1 
  searchPublikasi(ev: any) {
    // set val to the value of the searchbar
    let val = ev.target.value;
    this.publicationList.searchPublikasi(val).subscribe((publicationListData:any) => {
			this.allPublication= publicationListData.data;
			this.listDomain=this.allPublication[1];
	  })
  }

	doInfinite(infiniteScroll) {
	  console.log('Begin async operation');
    this.page = this.page+1;
    // set val to the value of the searchbar
    let val = ev.target.value;;
	  setTimeout(() => {
      this.publicationList.searchPublikasi(val).subscribe((publicationListData:any) => {
        for (let pub of publicationListData.data[1]) {
        this.listDomain.push(pub)
        }
      });
      console.log('Async operation has ended');
      infiniteScroll.complete();
	  }, 1000)
  }

 <!--Adds a search bar and an ionInput event to trigger the searchMovies function everytime a user types-->
  <ion-searchbar placeholder = "Cari Publikasi" (ionInput)="searchPublikasi($event)"></ion-searchbar>

  <span *ngFor="let list of allPublication" color="dark">
      <ion-label style="font-size: 1rem;text-align: right;padding-right: 2%;">
        Menampilkan {{list.total}} Publikasi
      </ion-label>
      <ion-grid *ngFor="let pub of listDomain">
        <ion-card (click)="launchPubDetailsPage(pub)">
          <ion-row>
            <ion-col size="1">
              <ion-item>
                <ion-thumbnail>
                  <ion-img [src]="pub.cover"></ion-img>
                </ion-thumbnail>
              </ion-item>
            </ion-col>
            <ion-col size="11" style="font-weight: bold;">
              <ion-label color="danger" style="font-size: 1.1rem;">{{pub.rl_date}}</ion-label>
              {{pub.title}}
              <ion-label color="secondary" style="font-size: 1.1rem;">{{pub.size}}</ion-label>
            </ion-col>
          </ion-row>
        </ion-card>
      </ion-grid>
  </span>

  <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
    <ion-infinite-scroll-content loadingSpinner="circles" loadingText=""></ion-infinite-scroll-content>
  </ion-infinite-scroll>

  searchPublikasi(searchStr:string){
    return this.http.get(this.apiUrl+""+this.page+"/keyword/"+searchStr+"/key/790ab00650e59132961637e651ba47fb/")
                    .do(res=>console.log(res))
                    .map(res=>res);
  }

I really confused, how to get the value that user input in search bar and used it in doInfinite.

2

Hello @bebenfirman,

You can use two way binding, use[(ngModel)] to listen the change event on searchbar input.

Improve html file:

<ion-searchbar placeholder = "Cari Publikasi" [(ngModel)]="keyword" (ionInput)="searchPublikasi($event, keyword)"></ion-searchbar>

Improve ts file

keyword: string = '';
.
.
.
searchPublikasi(ev: any, keyword) {
    // set val to the value of the searchbar
    this.keyword = keyword;
    this.publicationList.searchPublikasi(keyword).subscribe((publicationListData:any) => {
			this.allPublication= publicationListData.data;
			this.listDomain=this.allPublication[1];
	  })
  }

  doInfinite(infiniteScroll) {
	  console.log('Begin async operation');
    this.page = this.page+1;
	  setTimeout(() => {
      this.publicationList.searchPublikasi(this.keyword).subscribe((publicationListData:any) => {
        for (let pub of publicationListData.data[1]) {
        this.listDomain.push(pub)
        }
      });
      console.log('Async operation has ended');
      infiniteScroll.complete();
	  }, 1000)
  }
1 Like
3

Thank you so much, it works perfectly

1 Like