CODEWITHSUNDEEP
angularangular8ng-dropdown-multiselect
Nithin mm
Nithin mm

Reputation: 131

How to show SearchFilter textbox,even there is no data loaded in Angular Multiselect Dropdown

Angular version: 8

ng-multiselect-dropdown version: ^0.2.10

In my case, User to be able to start typing in the search field to dynamically load results into the dropdown. But In ng-multiselect-dropdown searchbox to be visible at least one row of data is required. Is there any way to show the search filter always,regardless of whether data is available.

this.dropdownList = [];

  this.dropdownSettings= {
  singleSelection: false,
  idField: 'item_id',
  textField: 'item_text',
  selectAllText: 'Select All',
  unSelectAllText: 'UnSelect All',
  itemsShowLimit: 3,
  allowSearchFilter: true
};

enter image description here

Upvotes: 1

Views: 1694

Answers (2)

Tejas Autkar
Tejas Autkar

Reputation: 11

I am late to answer, but this can be useful if someone gets the same question again. Add allowRemoteDataSearch:true to your dropdown options.

You can refer this thread

https://github.com/NileshPatel17/ng-multiselect-dropdown/issues/182

Upvotes: 1

A-Figerou
A-Figerou

Reputation: 165

I would have placed an entry ‘no data available’ when there are no result and remove when it is not necessary. Do you think you already use this: onFilterChange ?

dropdownList = [];

onFilterChange(data) => { // basic
    const defaultOption = {item_id: -1, item_text: ‘no data available’}
    if(this.dropdownList.length > 1) {
        this.dropdownList.shift();
        this.dropdownSetting.defaultOpen = false;
    } else {
        this.dropdownList.push(defaultOption);
        // leaving the drop down open
        this.dropdownSetting.defaultOpen = true;
    }
}

As me I would have finish the U.S using noDataAvailablePlaceholderText as mentioned in the doc. It may not work :)

hope it works for your version

Upvotes: 0

Related Questions