CODEWITHSUNDEEP
angularlistngx-chips
Sangwin Gawande
Sangwin Gawande

Reputation: 8166

Ngx-Chips - Autocomplete list not updated after receiving response

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

Upvotes: 3

Views: 3330

Answers (2)

Manoj Alwis
Manoj Alwis

Reputation: 1426

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

});
}

Upvotes: 3

trung kien Pham
trung kien Pham

Reputation: 11

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

Upvotes: 1

Related Questions