Ввод для поиска в реальном времени

Я создаю поисковый запрос в 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"}]

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

Содержит ли ваш массив ответов несколько таких объектов? {"name": "Ecole EC", "id": "22"}

Anuradha Gunasekara 11.04.2018 13:34

Да, это должно быть, но поскольку у меня есть только одна запись, содержащая буквы EC, она единственная, которая возвращается на самом деле каждый раз, когда вводит букву или удаляет поставщика, делает запрос к остальным api, которые отвечают любым именем, содержащим эти или эти буквы, мои проблема заключается в том, как сделать этот ответ доступным для моего html файла и создать раскрывающийся список из этого раскрывающегося списка, который должен иметь многополюсные значения в зависимости от содержимого базы данных

qasmaoui 11.04.2018 13:39

Я думаю, что вам нужно «автозаполнение». Верно?

Sergey Rudenko 12.04.2018 16:37
0
3
520
2

Ответы 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;
 }

Привет, Ануардха, спасибо, что вы повторы, это не совсем то, что я точно хочу, но это пример в ссылке, embed.plnkr.co/6kKpqmbow3XvDBdC5ENo, как вы можете видеть в приведенном выше примере, я хочу то же самое, но вместо того, чтобы иметь данные массива, у меня есть вызов ajax Каждый раз введите букву, и список будет обновляться каждый раз. и на lick chnage вход. и, как я уже сказал, я использую formGroup и formControlName вместо ngmodel, поэтому при использовании ngmodel он генерирует ошибки

qasmaoui 11.04.2018 14:33

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

    });

}

Надеюсь, это кому-то поможет :)

Другие вопросы по теме