How can we add dropdown like feature in typehead angular bootstrap-CodePudding

I am using an angular UI typeahead from Angular bootstrap UI

I would like to add a dropdown icon in typehead input and on click of that icon all the options should be visible.

Even if I select one option when I click on the dropdown icon all options should be visible how can i implement this?

<input type="text" ng-model="search" placeholder="Search"
uib-typeahead="eachCatigory in catigories | limitTo:8"/>

Any suggestions are great

CodePudding user response：

Inspired by the open on focus example in Angular Powered Bootstrap. Write your own button icon and run click$.next('') to pass an empty searchterm to the input. Wich will then toggle open all the results.

I just forked the open on focus example and added the button icon and the toggle method.

In your template:

<div >
    <button (click)="toggle()"><img src="image_src_here" alt="Icon"></button>
    <input
    id="typeahead-focus"
    type="text"
    
    [(ngModel)]="model"
    [ngbTypeahead]="search"
    #instance="ngbTypeahead"
/>
</div>

In your component style:

.input-container button {
  position: absolute;
  background: none;
  border: none;
  padding: .35rem;
}
.input-container input {
  padding-left: 2rem;
}

In your component:

export class NgbdTypeaheadFocus {
  model: any;
  showAll = false;
  @ViewChild('instance', { static: true }) instance: NgbTypeahead;
  focus$ = new Subject<string>();
  click$ = new Subject<string>();

  toggle() {
    this.click$.next('');
  }

  search: OperatorFunction<string, readonly string[]> = (
    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)
      )
    );
  };
}

Here is my stackblitz example