Question

我正在离子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);
        });

    });

}

我希望它有助于somone：）

实时搜索输入

2 个答案: