Activate the typeahead feature in ng-bootstrap 4 by setting it to open when the

Question

Activate the typeahead feature in ng-bootstrap 4 by setting it to open when the

I am currently using ng-bootstrap 4 (beta 8) and have the following setup:

<ng-template #rt let-r="result" let-t="term">
    {{ r.label }}
</ng-template>

<input
        id="typeahead-focus"
        class="form-control"
        [(ngModel)]="model"
        [ngbTypeahead]="search"
        [inputFormatter]="formatter"
        [resultTemplate]="rt"
        (focus)="focus$.next($event.target.value)"
        (click)="click$.next($event.target.value)"
        #instance="ngbTypeahead"
/>

I now want to trigger the opening of the typeahead when the user clicks on the input element. How can I achieve this?

this.search = (text$) =>
    text$
        .map(term => (term === '' ? this.items : this.items.filter(v => v.label.toLowerCase().indexOf(term.toLowerCase()) > -1)).slice(0, 10));

this.formatter = (x: {label: string}) => {
    console.log(x);
    return x.label;

javascript angular typescript bootstrap-4 ng-bootstrap

Answer 1

Answer №1

This particular solution has proven effective for me:

Simply add the onFocus event to the input search field

Within my.html:

 <input 
    (focus)="onFocus($event)" 
    type="text" 
    (selectItem)="onItemSelected($event)" 
    [(ngModel)]="myModel" 
    [ngbTypeahead]="search" 
    [resultTemplate]="rt" 
    [inputFormatter]="formatter"/>

Within my.ts:

  public onFocus(e: Event): void {
    e.stopPropagation();
    setTimeout(() => {
      const inputEvent: Event = new Event('input');
      e.target.dispatchEvent(inputEvent);
    }, 0);
  }

  search = (text$: Observable<string>) =>
    text$
      .debounceTime(200)
      .distinctUntilChanged()
      .map(term => this.myList
          .filter(v => this.myfilter(term))
          .slice(0, 10));

For additional insights, refer to Typeahed: allow search on focus #698

Answer 2

This particular solution has proven effective for me:

Simply add the onFocus event to the input search field

Within my.html:

 <input 
    (focus)="onFocus($event)" 
    type="text" 
    (selectItem)="onItemSelected($event)" 
    [(ngModel)]="myModel" 
    [ngbTypeahead]="search" 
    [resultTemplate]="rt" 
    [inputFormatter]="formatter"/>

Within my.ts:

  public onFocus(e: Event): void {
    e.stopPropagation();
    setTimeout(() => {
      const inputEvent: Event = new Event('input');
      e.target.dispatchEvent(inputEvent);
    }, 0);
  }

  search = (text$: Observable<string>) =>
    text$
      .debounceTime(200)
      .distinctUntilChanged()
      .map(term => this.myList
          .filter(v => this.myfilter(term))
          .slice(0, 10));

For additional insights, refer to Typeahed: allow search on focus #698

Answer 3

Answer №2

Based on the latest guidelines, it is recommended to utilize the following HTML:

<input id="typeahead-focus" type="text" class="form-control" [(ngModel)]="model"  [ngbTypeahead]="search" (focus)="focus$.next($event.target.value)" (click)="click$.next($event.target.value)" #instance="ngbTypeahead"/>

along with the following code snippet:

  @ViewChild('instance') instance: NgbTypeahead;
  focus$ = new Subject<string>();
  click$ = new Subject<string>();

  search = (text$: Observable<string>) => {
    const debouncedText$ = text$.pipe(debounceTime(200), distinctUntilChanged());
    const clicksWithClosedPopup$ = this.click$.pipe(filter(() => !this.instance.isPopupOpen()));
    const inputFocus$ = this.focus$;

  return merge(debouncedText$, inputFocus$, clicksWithClosedPopup$).pipe(
    map(term => (term === '' ? states
       : states.filter(v => v.toLowerCase().indexOf(term.toLowerCase()) > -1)).slice(0, 10))
  );

Answer 4

Based on the latest guidelines, it is recommended to utilize the following HTML:

<input id="typeahead-focus" type="text" class="form-control" [(ngModel)]="model"  [ngbTypeahead]="search" (focus)="focus$.next($event.target.value)" (click)="click$.next($event.target.value)" #instance="ngbTypeahead"/>

along with the following code snippet:

  @ViewChild('instance') instance: NgbTypeahead;
  focus$ = new Subject<string>();
  click$ = new Subject<string>();

  search = (text$: Observable<string>) => {
    const debouncedText$ = text$.pipe(debounceTime(200), distinctUntilChanged());
    const clicksWithClosedPopup$ = this.click$.pipe(filter(() => !this.instance.isPopupOpen()));
    const inputFocus$ = this.focus$;

  return merge(debouncedText$, inputFocus$, clicksWithClosedPopup$).pipe(
    map(term => (term === '' ? states
       : states.filter(v => v.toLowerCase().indexOf(term.toLowerCase()) > -1)).slice(0, 10))
  );

Activate the typeahead feature in ng-bootstrap 4 by setting it to open when the

Answer №1

Answer №2

Similar questions

determining the preference between setTimeout and setImmediate

Leveraging the power of both IntelliJ and AngularCLI 6 to effortlessly import libraries using their package names

Error message in Angular when promises are not defined

Update breadcrumbs dynamically by clicking on each horizontal panel

Ways to implement standard sorting in react-table

The children's className attribute can impact the parent element

Validate if the translation file exists in ngx-translate

What could be the reason for Sequelize to completely replace the record when updating in a put request?

Adding a project to TFS source control using Visual Studio Code: a step-by-step guide

Error Encountered in Cypress: "Tried to wrap warn but it is already wrapped"

Enhance Angular's User Interface using the Express Backend

Vue component architecture

Leveraging AJAX for transferring variable from a dynamic HTML table to PHP for executing an update query

A helpful guide on using workbox to effectively cache all URLs that follow the /page/id pattern, where id is a

Is it possible to execute a standalone .js file using Node.js and Express?

Displaying a loading progress bar while the website is being loaded using Javascript

Angular-meteor tutorials have a method known as '/parties/insert' that is already clearly defined and explained

Utilizing Gulp locally without the need for global installation or referencing the bin js file

Unspecified variables in a Javascript bot

The jQuery date picker is showing an error with the function daySettings[2].replace, indicating that