Topic: Search in a Dropdown

gmayas free asked 5 years ago


Hi.

Will they have a Dropdown that within their menuitem, have a search input?

For example:

https://manishjanky.github.io/ngx-select-dropdown/

Best regards.


Arkadiusz Idzikowski staff answered 4 years ago


@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>

Nate free answered 4 years ago


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?


Damian Gemza staff answered 5 years ago


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



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 7.0.0
  • Device: Dropdown
  • Browser: Google Chrome
  • OS: All
  • Provided sample code: No
  • Provided link: Yes
Tags