Ngx-chips: Autocomplete only works for the first item

[lukas-bernert]

I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting
[ ] support request/question

Notice: feature requests will be ignored, submit a PR if you'd like

Current behavior
I am using autocomplete for my chips. It works fine for the first item. But as I am entering characters for the second item, autocomplete doesn't work anymore.

Expected behavior
The autocomplete list would show suggestions not only for the first item.

Minimal reproduction of the problem with instructions (if applicable)

<tag-input [ngModel]="search?.manufacturers" [identifyBy]="'id'" 
    [displayBy]="'display'" placeholder="+ Manufacturer" 
    [onlyFromAutocomplete]="true"
    secondaryPlaceholder="Enter a new manufacturer" theme="minimal">
    <tag-input-dropdown [autocompleteObservable]="getManufacturersContains" 
    [focusFirstElement]="true">
    </tag-input-dropdown>
</tag-input>

  public getManufacturersContains = (text: string): Observable<any> => {
    let httpParams = new HttpParams();
    httpParams = httpParams.append('text', text);
    const url = this.configuration.API_ENDPOINT + 'manufacturer/get_manufacturers_contains'
    return this.http
      .get(url, { params: httpParams })
      .map(data => data);
      // .pipe(map(data => data.json().items.map(item => item.full_name)));
  };

What do you use to build your app?. Please specify the version
angular-cli

Angular version:
5.2.1

ngx-chips version:
1.6.3

Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

[Gbuomprisco]

You probably need to add displayBy and identifyby to the drop down parameters

[NikhilRadadiya]

@Gbuomprisco Can I use onTextChange and autocomplete together?
I have an requirenment where I need to pass column name from which I'm fecthing records but with autocompleteObservable I can't pass it so I want to use onTextChange like onTextChange($event,columnName) .

Is there a way to mix these two or any other way to do this?

[luckymoneyDEV]

I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting
[ ] support request/question

Notice: feature requests will be ignored, submit a PR if you'd like

Current behavior
I am using autocomplete for my chips. It works fine for the first item. But as I am entering characters for the second item, autocomplete doesn't work anymore.

Expected behavior
The autocomplete list would show suggestions not only for the first item.

Minimal reproduction of the problem with instructions (if applicable)

<tag-input [ngModel]="search?.manufacturers" [identifyBy]="'id'" 
    [displayBy]="'display'" placeholder="+ Manufacturer" 
    [onlyFromAutocomplete]="true"
    secondaryPlaceholder="Enter a new manufacturer" theme="minimal">
    <tag-input-dropdown [autocompleteObservable]="getManufacturersContains" 
    [focusFirstElement]="true">
    </tag-input-dropdown>
</tag-input>

public getManufacturersContains = (text: string): Observable<any> => { let httpParams = new HttpParams(); httpParams = httpParams.append('text', text); const url = this.configuration.API_ENDPOINT + 'manufacturer/get_manufacturers_contains' return this.http .get(url, { params: httpParams }) .map(data => data); // .pipe(map(data => data.json().items.map(item => item.full_name))); };
What do you use to build your app?. Please specify the version
angular-cli

Angular version:
5.2.1

ngx-chips version:
1.6.3

Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

Hi,
you can see code bellow:
HTML:
` [placeholder]="'Select Name +'" [secondaryPlaceholder]="'Select Name +'"
[ngModel]="['Material']" [onlyFromAutocomplete]="true" (onTextChange)="onTextChange($event)" (onSelect)="onSelectedre($event)" (onAdd)="onItemAddeder($event)"[editable]='true' (onTagEdited)="onTagEdited($event)">
[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); };

[gui679]

same problem here.
It's not the displayBy and identifyby parameters on drop down

Probably the same problem as luckymoneyDEV above

i think it's related to receive a Observable < any > , not a Observable < Response > . If I put "Response" i get a error,

Type 'Observable < any[] > ' is not assignable to type 'Observable < Response > '.
Type 'any[]' is not assignable to type 'Response'.
Property 'headers' is missing in type 'any[]'.