Search Bar and Results from php script - ionic-framework

Question

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();
}
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>

Answer 1

well i will assume your authservice provider works fine i will show you this with php no framework and i will be doing no authentication with jwt or oauth or some authentication system but will go straight to your question:
first you may want to trigger a http request when the user presses enter or key up but lets go with key enter.
in the ion-searchbar remove the (ionInput) method and use the key.enter event in angular like this:
<ion-searchbar placeholder="search by name of articles" (keyup.enter)="search()" [(ngModel)]="search_content"></ion-searchbar>
now the search function will send a http get request using your authservice povider for me i called mine HTTPprovider here is the code:
search(){
if(this.search_content==""){
}else{
let loader = this.loader.create({
content: "please wait..."
});
loader.present();
this.HttpProvider.getData("search-post.php?search="+this.search_content).then((res)=>{
this.response_data = res;
if(this.response_data==null){
loader.dismiss();
}else{
this.result = this.response_data;
loader.dismiss();
}
})
}
}
let me explain this a bit, the search content which we binded to the ion-searchbar
will be checked if its empty if yes we do nothing or display nothing then we call our http service provider which sends a http request passing the search_content binded to the element and yes lest i forget we used a LoadingController which we called loader you could create a seperate service provider to handle that and import the provider to your file and then use the loadingcontroller that makes code cleaner, now the next is to return the response value of the http service and assign its value to a global variable called response_data. now this is important after this has been mapped dont use it directly in your view because it will throw an error once your search result returns nothing this seems to be a bug in ionic 3 i guess. once your done check if the response_data object is null if no then assign it to another value called result and finally dismiss our loading controller .......
for our php file:
<?php
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Headers: X-Requested-With, Content-Type, Origin, Cache-Control, Pragma, Authorization, Accept, Accept-Encoding");
header("Access-Control-Allow-Methods:PUT, GET, POST, DELETE, OPTIONS");
require_once "config/config.php";
require_once "config/error.php";
$conn = new config();
$get_var = htmlspecialchars($_GET["search"]);
$space_checker = preg_match("/\s/",$get_var);
$data = array();
if($get_var==""){
} else {
if($space_checker==0){
$sql = "SELECT * FROM post_content where header LIKE '%$get_var%' LIMIT 3";
$result = $conn->query($sql);
$rowcount = $conn->rowcount($result);
if($rowcount == 0){
}else{
foreach ($result as $key => $value) {
$data[] = $value;
}
print json_encode($data);
}
}elseif ($space_checker > 0) {
$value_explode = explode(" ",$get_var);
foreach ($value_explode as $key => $values) {
$sql = "SELECT * FROM post_content where header LIKE '%$get_var%' OR '%$values%' ";
}
$sql.="LIMIT 3";
$result = $conn->query($sql);
$rowcounts = $conn->rowcount($result);
if($rowcounts == 0){
}else{
foreach ($result as $key => $valuese) {
$data[] = $valuese;
}
print json_encode($data);
}
}
}
?>
for the php file first we check for number of spaces in between words using regular expression after that we then check if the get variable sent equals to an empty string
we display nothing then we check if number of spaces equals zero if it contains some search content and it equals zero basically it has some contents but no space inbetween the search. we search using the like keyword in php after we which we save it in an array and json_encode it i use limit 3 to return 3 contents only ofcourse there will be a pagination which i believe you know also.now if a space exist we explode it and get each of those words and search for the full text entered in the search and thier individual words and then return a json_encoded 3 contents..
and finally in our view we display it using *ngFor:
<ion-list style="margin-top:50px;">
<ion-item *ngFor="let items of result" >
<ion-thumbnail item-left>
<img src="{{ image }}/{{ items.file_name }}">
</ion-thumbnail>
<h4 style="font-weight:bolder;">{{ items.header }}</h4>
<p> <b><span style="font-size:10px;"> <ion-icon name="eye"></ion-icon> {{ items.clicks }} views</span>
<span style="font-size:10px;"> <ion-icon name="clipboard"></ion-icon> {{ items.month }}/{{ items.year }}</span>
</b></p>
</ion-item>
</ion-list>
and that should do.