Ngx-Chips - Autocomplete list not updated after receiving response

Question

I am using ngx-chips plugin in my project.

Now the dropdown list is populated using Http call to server.

myContactList data is updated on view as well but I cannot see the dropdown. If I type some text again the list shows up. But the list is old one not the data of latest request.

These is also one issue registered in this plugin. See issue here

I want list to update and show up as I receive response pron server.

HTML :

<tag-input id="myAnchor"  [(ngModel)]='items' (onTextChange)="onTextChange($event)" [onlyFromAutocomplete]="true">
    <tag-input-dropdown [showDropdownIfEmpty]="true" [autocompleteItems]="myContactList">
        <ng-template let-item="item" let-index="index">
            {{ item.display }}
            <delete-icon (click)="input.removeItem(item, index)"></delete-icon>
        </ng-template>
    </tag-input-dropdown>
</tag-input>   

{{myContactList | json}}

TS :

onTextChange(text) {
    const data = {'Text': text};
    this.Service = this.myContactService.getSearchedContacts(data).subscribe(responseData => {
        this.myContactList = [];
        for (let index = 0; index < responseData.length; index++) {
            responseData[index].display = responseData[index].name;
            responseData[index].value = responseData[index].id;
            this.myContactList.push(responseData[index]);
        }
    });
}

score 2 · Answer 1 · edited Nov 05 '19 at 05:45

It worked for me like this:

<tag-input   [(ngModel)]='items' (onTextChange)="change($event)" [onlyFromAutocomplete]="false">
<tag-input-dropdown [showDropdownIfEmpty]="true" [autocompleteItems]="preparedTags">
  <ng-template let-item="item" let-index="index">
    {{ item.display }}
    <delete-icon (click)="input.removeItem(item, index)"></delete-icon>
  </ng-template>
</tag-input-dropdown>

 change(value) {
this.preparedTags = [];
this.zone.run(() => {

  setTimeout(() => {
    this.apiProvider.getSimpleSearchKeyWords(value)
      .then((res) => {


          for (let i = 0; i < JSON.parse(JSON.stringify(res)).data.length; i++) {

          this.preparedTags.push(JSON.parse(JSON.stringify(res)).data[i].type + " " + JSON.parse(JSON.stringify(res)).data[i].text)

          }
        }, (err) => {

        }
      );

  }, 100);

});
}

score 0 · Answer 2 · answered Sep 15 '18 at 10:24

you can reference code bellow: HTML:

<tag-input name='tag2' [ngClass]="'tag-select'" theme='bootstrap'  
                                        [placeholder]="'Select Name +'" [secondaryPlaceholder]="'Select Name +'"
                                        [ngModel]="['Material']" [onlyFromAutocomplete]="true"  (onTextChange)="onTextChange($event)" (onSelect)="onSelectedre($event)" (onAdd)="onItemAddeder($event)"[editable]='true' (onTagEdited)="onTagEdited($event)">
                                        <tag-input-dropdown [appendToBody]="false" [displayBy]="'Name'" [identifyBy]="'id'"
                                          [autocompleteObservable]="requestAutocompleteItems "  (onAdd)="onItemAdded($event)"
                                          (onSelect)="onSelectedtag($event)" >
 </tag-input-dropdown>
 </tag-input>

.ts file:

 lstCallAPI=['item1', 'item2', 'item3'];

        loadPropertyTypeData(){
        this._dataService.get('/api/product/get-add-property')
        .subscribe((response: any) => {
         for (let index = 0; index < response.result.length; index++) {
           const element = response.result[index];
          this.lstCallAPI.push(element.Name);
         }
          this.modalOverflow.show();
        });
      }
    public requestAutocompleteItems = (text: string): Observable<string[]> => {
      return of(this.lstCallAPI);
    };

Ngx-Chips - Autocomplete list not updated after receiving response

2 Answers2