Search in a Dropdown

Dear gmayas,

We haven't got the dropdown with search input, but you'll can write it on your own.

Here's the very basic example of dropdown with search input.

.html:

<div class="dropdown" mdbDropdown [autoClose]="false">
        <button mdbDropdownToggle mdbBtn color="primary" class="dropdown-toggle waves-light" type="button"
                mdbWavesEffect>
          Dropdown primary
        </button>
        <div class="dropdown-menu dropdown-primary">
          <div class="md-form">
            <input type="search" class="form-control" id="input1" [(ngModel)]="searchValue" mdbInput
                   (keyup)="filterItems()">
            <label for="input1">Search</label>
          </div>
          <a class="dropdown-item" href="#" *ngFor="let item of filterItems()">
            {{item}}
          </a>
        </div>
      </div>

.ts:

sortedItems = ['Link 1', 'Link 2', 'Link 3', 'Link 4'];
  searchValue: string = '';

  filterItems() {
    return this.sortedItems.filter(el => el.indexOf(this.searchValue) !== -1);
  }

Remember to import the FormsModule in your application!

Best Regards,

Damian

This works except for the fact that when you try to click on the search field it closes the dropdown. Is there a way to ensure that the dropdown stays open when clicking the search field?

@Nate
Which version of MDB Angular do you use? The dropdown should not close on the input fielt click if the autoClose input is set to false. You can also add the dropdown hide method on the dropdown item click to manually close the dropdown on click in the results list.

Here is an example:

<div class="dropdown" mdbDropdown [autoClose]="false" #dropdown>
  <button
    mdbDropdownToggle
    mdbBtn
    color="primary"
    class="dropdown-toggle waves-light"
    type="button"
    mdbWavesEffect
  >
    Dropdown primary
  </button>
  <div class="dropdown-menu dropdown-primary">
    <div class="md-form">
      <input
        type="search"
        class="form-control"
        id="input1"
        [(ngModel)]="searchValue"
        mdbInput
        (keyup)="filterItems()"
      />
      <label for="input1">Search</label>
    </div>
    <a class="dropdown-item" href="#" *ngFor="let item of filterItems()" (click)="dropdown.hide()">
      {{ item }}
    </a>
  </div>
</div>