CODEWITHSUNDEEP
angulartypescriptng-bootstrap
Rajasekhar
Rajasekhar

Reputation: 2455

Angular Typeahead giving repeated values in the list

I'm tried typeahead functionality, typeahead suggestions coming but every time its not clearing and (it is appending)showing repeated suggestions in pipe. Please refer attached screenshot. I tried below code,

data: any = [];

getTypeaheadData(){
    const param = (document.getElementById('test1') as HTMLInputElement).value;
    if (typeof param !== "undefined") {     
        this.http.get('/api/sampleAPI',{params: {param: param}}).subscribe((response: any) => {      
        this.data.push(...response);          
      })  
    }
}
  
typeaheadVal = (text$: Observable<string>) =>  
  text$
    .debounceTime(200)
    .distinctUntilChanged()
    .map(term => term.length < 2 ? []
      : this.data.filter(v => v.toLowerCase().indexOf(term.toLowerCase()) > -1).slice(0, 10));

HTML:

  <input id="test1" type="text" (keyup)="getTypeaheadData()" class="form-control" [ngbTypeahead]="typeaheadVal" typeahead-no-results="noResults"/>

Repeated options

Upvotes: 1

Views: 226

Answers (1)

rasmusvhansen
rasmusvhansen

Reputation: 1522

You push (append operation) the data to the array every time a key is pressed:

this.data.push(...response)

I think you should have another look at the documentation, get rid of the (keyup) handler, and do something like this example, where a switchMap is used to cancel "in-flight" requests to the service: https://ng-bootstrap.github.io/stackblitzes/typeahead/http/stackblitz.html

Upvotes: 1

Related Questions