实时搜索输入答案

【问题标题】：live search input实时搜索输入
【发布时间】：2018-04-11 11:02:23
【问题描述】：

我正在 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"}]

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

【问题讨论】：

您的响应数组是否包含多个这样的对象？ {"name":"Ecole EC","id":"22"}
是的，它应该但是因为我只有一个包含 EC 字母的记录，所以实际上每次键入字母或删除提供者时都会返回唯一一个返回的 api，它会以任何包含那个或那些字母的名称，我的问题是如何使该响应可用于我的 html 文件并构建一个下拉列表，下拉列表应具有多极值，具体取决于数据库内容
我猜你追求的是“自动完成”。对吗？

标签： ajax angular ionic-framework ionic3 livesearch

【解决方案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;
 }

【讨论】：

你好 Anuardha，谢谢你的重播，这不是我想要的，但 heer 是链接中的一个例子，embed.plnkr.co/6kKpqmbow3XvDBdC5ENo 正如你在上面的示例中看到的那样，我想要相同的行为，但不是有一个数组数据我有一个ajax调用，每次输入一个字母，每次都应该更新列表。并在 lick chnage 输入。正如我所说，我使用的是 formGroup 和 formControlName 而不是 ngmodel，所以在使用 ngmodel 时会产生错误

【解决方案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 :)

【讨论】：