live search input - ajax

Question

I'm creating a live search input in ionic 3
inside a form group
inside my ts file, I'm using
getsubelements(selectedValue) {
if(selectedValue){
this.VisitesProvider.getEcolesLive(selectedValue).then((result) =>{
this.responseData = result;
});
}
}
and my provider look like :
getEcolesLive(query){
var data = {
"q" :query
}
return new Promise((resolve, reject) =>{
let headers = new HttpHeaders();
this.http.post(ecoleliveurl, JSON.stringify(data), {headers: headers}).
subscribe(res =>{
resolve(res);
console.log(res);
}, (err) =>{
reject(err);
});
});
}
I'm getting the expected result in json format from mu api server:
[{"name":"Ecole EC","id":"22"}]
I want to populate the names in a dropdown list and on click on the desired one of should replace the search input.

Answer 1

You can create a dropdown menu in the component template like this.
<select [ngModel]="selectedItem" (ngModelChange)="onChange($event)" name="sel2">
<option [value]="i" *ngFor="let i of responseData">{{i.name}}</option>
</select>
In your component.
onChange(newValue) {
console.log(newValue);
this.selectedItem = newValue;
}

Answer 2

this is the html
<ion-item>
<ion-label>Ecole</ion-label>
<ion-input type="text" placeholder="Search" formControlName="ecole" (ionChange)="getsubelements($event._value)" ng-focus="focus=true"></ion-input>
</ion-item>
<div id="search-results" ng-show="focus">
<div class="search-result" *ngFor="let i of responseData" (click)="onChange(i.name)">{{i.name}}</div>
</div>
this is the js part
the form groupe :
visitData = {"name":"", "startdate":"","linkedto":"","ecole":"","selectedItem":""};
constructor(public navCtrl: NavController, public navParams: NavParams,private formBuilder: FormBuilder,public VisitesProvider:VisitesProvider) {
this.visiteFormGroup = this.formBuilder.group({
name: ['', Validators.required],
startdate: ['', Validators.required],
ecole:['', Validators.required],
});
}
the two functions :
getsubelements(selectedValue) {
if(selectedValue){
this.VisitesProvider.getEcolesLive(selectedValue).then((result) =>{
this.responseData = result;
var x = document.getElementById("search-results");
x.style.display="block"
});
}
}
onChange(newValue) {
console.log("called")
console.log(newValue.name)
this.visiteFormGroup.controls["ecole"].setValue(newValue);
var x = document.getElementById("search-results");
x.style.display="none"
}
and the provider function
getEcolesLive(query){
var data = {
"q" :query
}
return new Promise((resolve, reject) =>{
let headers = new HttpHeaders();
this.http.post(ecoleliveurl, JSON.stringify(data), {headers: headers}).
subscribe(res =>{
resolve(res);
console.log(res);
}, (err) =>{
reject(err);
});
});
}
i hope it will help somone :)