CODEWITHSUNDEEP
angularng-bootstrap
emiyasaki
emiyasaki

Reputation: 48

NgbTypeahead not showing dropdown

I'm trying to use ng-bootstrap's NgbTypeahead, but it's not showing the dropdown with the options.

I'm quite sure I'm doing something wrong, once after the search, my input element shows ng-reflect-ngb-typeahead="function (text) { as an attribute, as if it's not recognising the search function somehow.

My code in component.ts:

search = (text: Observable<string>) => {
    return text.pipe(
      debounceTime(200),
      distinctUntilChanged(),
      map(term => {
        console.log(this.livros.filter((v) => v.titulo.toLowerCase().indexOf(term.toLowerCase()) > -1).slice(0, 10));
        term.length < 3 ? [].slice() : this.livros.filter((v) => v.titulo.toLowerCase().indexOf(term.toLowerCase()) > -1).slice(0, 10);
      })
    );
  }

Excerpt from component.html:

<div class="row">
  <div class="col-md-12">
    <label for="livro-search">Digite o t&iacute;tulo do livro</label>
    <input id="livro-search" type="text" class="form-control" [(ngModel)]="model" [ngbTypeahead]="search">
  </div>
</div>

The livros field is populated when ngOnInit is ran so it's not empty when I try to search.

The console outputs the resulting array correctly, so I know the search function should be working. But I'm not being able to fill the component with the response.

I'm using:

If anyone could shed a light on where I'm failing I would be eternally grateful (well, at least for the end of the year).

Upvotes: 1

Views: 3129

Answers (3)

Maximilian Breutling
Maximilian Breutling

Reputation: 1

In case someone runs into this again: For me, I needed to add a display and container property to my HTML, in order for the Typeahead Dropdown to show.

Something like:

<input
  class="form-control"
  container="body"
  display="dynamic"
  id="typeahead-prevent-manual-entry"
  type="text"
  [(ngModel)]="selection"
  [editable]="false"
  [inputFormatter]="formatter"
  [ngbTypeahead]="search"
  [resultFormatter]="formatter" />

Upvotes: 0

Manuel Gir&#243;n
Manuel Gir&#243;n

Reputation: 11

Let's try this:

ngb-typeahead-window {
 display: block!important;
}

Upvotes: 0

Adrian Brand
Adrian Brand

Reputation: 21638

Your map function doesn't return anything.

search = (text: Observable<string>) => {
    return text.pipe(
      debounceTime(200),
      distinctUntilChanged(),
      map(term => {
        console.log(this.livros.filter((v) => v.titulo.toLowerCase().indexOf(term.toLowerCase()) > -1).slice(0, 10));
        return term.length < 3 ? [].slice() : this.livros.filter((v) => v.titulo.toLowerCase().indexOf(term.toLowerCase()) > -1).slice(0, 10);
      })
    );
  }

Upvotes: 1

Related Questions