Живой поиск

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

        });

    }

Я получаю ожидаемый результат в формате json с сервера mu api:

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

Я хочу заполнить имена в раскрывающемся списке и при щелчке на нужном из них должен заменить поисковый ввод.

Answer 1

Это 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);
        });

    });

}

Я надеюсь, что это поможет Сомоне:)

Answer 2

Вы можете создать выпадающее меню в шаблоне компонента, как это.

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