Search Bar and Results from php script

Ionic Framework ionic-v3
1

Hello i have created a SearchPage but i don’t know how to return the search results with the php script. I already made an authservice provider to connect with the database and works fine any time i call it to return the session user’s data. I want the user to type in letters on the search bar and the results to be displayed on

  <ion-content padding>
   <ion-card *ngFor="let item of dataSet; let msgIndex = index">

authservice.ts

import { Injectable } from '@angular/core';
import { Http, Headers } from '@angular/http';
import 'rxjs/add/operator/map';

let apiUrl = "http://localhost/PHP-Slim-Restful1/api/";

@Injectable()
export class AuthService {

constructor(public http: Http) {
console.log('Hello AuthService Provider');
 }

 postData(credentials, type){

return new Promise((resolve, reject) =>{
  let headers = new Headers();
  this.http.post(apiUrl+type, JSON.stringify(credentials), {headers: headers}).
  subscribe(res =>{
    resolve(res.json());
  }, (err) =>{
    reject(err);
  });

});

 }

 }

SearchPage,ts

 @Component({ selector: "page-search", templateUrl: "search.html" })
export class SearchPage {
public userDetails: any;
public resposeData: any;
public dataSet: any;
public noRecords: boolean;
userPostData = {
   uid: "",
   token: "",
   username: "",
   bio: "",
   profile_pic: "",
   message: "",
   msg_id: "",
   title: "",
   description: "",
   media_pic: "",
   created: "",
   uid_fk: ""
};

 constructor(
   public common: Common,
   public navCtrl: NavController,
   public app: App,
   public menu: MenuController,
   public authService: AuthService,
   platform: Platform,
   statusBar: StatusBar,
   splashScreen: SplashScreen
 ) {
         const data = JSON.parse(localStorage.getItem("userData"));
   this.userDetails = data.userData;
   this.userPostData.uid = this.userDetails.uid;
   this.userPostData.token = this.userDetails.token;
   this.userPostData.username = this.userDetails.username;
   this.userPostData.msg_id = this.userDetails.msg_id;
   this.userPostData.message = this.userDetails.message;
   this.userPostData.title = this.userDetails.title;
   this.userPostData.description = this.userDetails.description;
   this.userPostData.media_pic = this.userDetails.media_pic;
   this.userPostData.created = this.userDetails.created;
   this.userPostData.profile_pic = this.userDetails.profile_pic;
   this.userPostData.bio = this.userDetails.bio;
   this.noRecords = false
   this.SearchResults();
    this.mostusersList();
    this.mostmediaList();
}


 SearchResults() {
   this.authService.postData(this.userPostData, "userGroupSearch").then(

       result => {
           this.resposeData = result;
           if (this.resposeData.userGroupSearch) {
               this.dataSet = this.resposeData.userGroupSearch;
               console.log(this.dataSet);

           } else {
               console.log("No access");
           }
       },
       err => {
           //Connection failed message
       }
   );
 }

i call the PHP function in here userGroupSearch is the name of the function

 this.authService.postData(this.userPostData, "userGroupSearch").then(

And the JSON returns in here

this.dataSet = this.resposeData.userGroupSearch;

SearchPage.html

   <ion-header>
<ion-navbar>
<button ion-button menuToggle>
  <ion-icon name="menu"></ion-icon>
</button>
<ion-searchbar [(ngModel)]="myInput"
               [showCancelButton]="shouldShowCancel"
               (ionInput)="onInput($event)"
               (ionCancel)="onCancel($event)"
               placeholder="Search for Media, Artists, Flows...">
</ion-searchbar>
</ion-navbar>

<ion-content padding>
<ion-card *ngFor="let item of dataSet; let msgIndex = index"></ion-card>
</ion-content>