实时搜索输入

Question

>我正在 ionic 3 中创建实时搜索输入在表单组内

在我的 ts 文件中，我正在使用

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

我的提供程序看起来像：

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

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

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

我想在下拉列表中填充名称，然后单击所需的名称之一，以替换搜索输入。

Answer 1

您可以在组件模板中创建这样的下拉菜单。

<select [ngModel]="selectedItem" (ngModelChange)="onChange($event)" name="sel2">
    <option [value]="i" *ngFor="let i of responseData">{{i.name}}</option>
</select>

在您的组件中。

 onChange(newValue) {
    console.log(newValue);
    this.selectedItem = newValue;
 }

Answer 2

这是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>

这是 JS 部分

形式 组 ：

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

两个功能：

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

和提供程序函数

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

我希望它能帮助索蒙:)