如何实现实时搜索输入？

Question

我正在ts文件表单组中创建一个离子3的实时搜索输入，我正在使用：

 getsubelements(selectedValue) {
        if(selectedValue){
            this.VisitesProvider.getEcolesLive(selectedValue).then((result) =>{
                this.responseData = result;

            });
        }

    }

我的provider：

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

        });

    }

我从muAPI服务器获得了json格式的预期结果：

[{"name":"Ecole EC","id":"22"}]

我希望在下拉列表中填充名称，然后单击所需的内容替换搜索输入的名称。

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