Ionic - SearchBar with Mysql Script

Ionic Framework ionic-v3
21

Firstly, Your function doesnt make any sense. I cant find this.items in your declarations where have u declared it??
I think you need to learn how the filter array function works. Secondly u need to initiate the function filterItems() on change event in text box.

22

Sorry i am all confused thats why i asked you to post the whole search.ts file.

you mean i should declared it like this

   ```

public items: any;

23

It works now but i anot getting the results it should sort. I am getting the same results regardless what i type in the searchbar

I want it to sort like autocomplete. to show results of what i type in the search bar

search.ts

 @Component({ selector: "page-search", templateUrl: "search.html" })
  export class SearchPage {
  filter: string = '';
  public userDetails: any;
  public resposeData: any;
  public dataSet: any;
  public userSet: any;
  public mediaSet: any;
  public noRecords: boolean;
   userPostData = {
     uid: "",
     token: "",
     username: "",
     bio: ""
  };
 constructor(
     public common: Common,
     public navCtrl: NavController,
     public app: App,
     public menu: MenuController,
     public authService: AuthService,
     public http: Http,
     platform: Platform,
     statusBar: StatusBar,
     splashScreen: SplashScreen
 ) {
     this.initializeItems();
     this.mostmediaList();
  }
 initializeItems() {
     return this.userPostData;
 }
           getItems(ev: any) {

              this.initializeItems();
              let val = ev.target.value;

              if (val && val.trim() != '') {
                  this.authService.postData(this.userPostData, "userGroupSearch").then(
                      result => {
                          this.resposeData = result;
                          if (this.resposeData.allArtistsData) {
                              this.userSet = this.resposeData.allArtistsData;
                                  console.log(this.userSet);

                          } else {
                              console.log("No access");
                          }
                      },
                  );
              }
          }

What do you think @abhishekpatilxyz

24

Show me your html code too. If you want to sort this.resposeData then apply the filter function to that variable.

25

I did this and worked.

search.html
<ion-searchbar (ionInput)="getItems($event)"></ion-searchbar>

search.ts

export class SearchPage {
    public searchTerm: any;
    public userDetails: any;
    public resposeData: any;
    public dataSet: any;
    public userSet: any;
    public mediaSet: any;
    public noRecords: boolean;
    userPostData = {
        uid: "",
        token: "",
        username: "",
        bio: ""
    };

    constructor(
        public common: Common,
        public navCtrl: NavController,
        public app: App,
        public menu: MenuController,
        public authService: AuthService,
        public http: Http,
        platform: Platform,
        statusBar: StatusBar,
        splashScreen: SplashScreen


    ) {

        this.initializeItems();
    }


    initializeItems() {
        return this.userPostData;
    }

              getItems(ev: any) {

                  this.initializeItems();
                  let val = ev.target.value;

                  if (val && val.trim() != '') {
                      this.authService.postData(this.userPostData, "userGroupSearch").then(
                          result => {
                              this.resposeData = result;
                              if (this.resposeData.allArtistsData) {
                                  this.userSet = this.resposeData.allArtistsData.filter((item) => {
                                      return (item.username.toLowerCase().indexOf(val.toLowerCase()) > -1);
                                  })
                              }else {
                                  console.log("No access");
                              }
                          },
                      );
                  }
              }

What do you think?

26

I think now you must have understood the working of the filter function.
i think it will work fine.
It is one of the important programming methodologies for iteration