CODEWITHSUNDEEP
javascriptangularbootstrap-multiselect
Sonali Mittal
Sonali Mittal

Reputation: 11

show message if search item did not found using ng-multiselect-dropdown Search filter in Angular

I am using ng-multiselect-dropdown for the search filter... I would like to show 'No items Matches' message if the searched item is not available in the dropdown List...

Angular component

  this.getDynamicFilterList();
  this.settings = {
    singleSelection: false,
    idField: 'tag_id',
    textField: 'tag_name',
    selectAllText: 'Select All',
    unSelectAllText: 'UnSelect All',
    itemsShowLimit: 3,
    allowSearchFilter: true,
    clearSearchFilter: true,
  };
}

getDynamicFilterList() {
  this.filterService.getDynamicFilter().subscribe(res => {
    let dummyArr = [];
    for (let key in res.data) {
      dummyArr.push(res.data[key])
    }
    let group = {}
    this.filterDynamicDropdown = dummyArr;
    this.filterDynamicDropdown.forEach(dynamic_filter => {
      group[dynamic_filter.category_id] = new FormControl('');
    })
    this.dynamicFormGroup = new FormGroup(group);
  })
}```

***Angular Template***
```<form [formGroup]="dynamicFormGroup" *ngIf="dynamicFormGroup">
<div class="form-group row" *ngFor="let item of filterDynamicDropdown">
  <ng-multiselect-dropdown class="dynamic-dropdown" placeholder="{{item.category_name}}" [settings]="settings"
    [data]="item.value" [disabled]="false" (onFilterChange)="onFilterChange($event,item.value)"
    (onSelect)="onItemSelect($event)" (onDeSelect)="onDeSelect($event)"
    (onSelectAll)="onSelectAll($event)" (onDeSelectAll)="onDeSelectAll($event)" formControlName="{{item.category_id}}">
  </ng-multiselect-dropdown>
</div>
</form>```

Upvotes: 1

Views: 1286

Answers (3)

user27391021
user27391021

Reputation: 

<ng-select [(ngModel)]="selectedCar" [items]="cars" bindLabel="name" bindValue="id">
    <!-- Custom Header -->
    <ng-template ng-header>
        <div class="custom-header">
            <h3>Available Cars</h3>
        </div>
    </ng-template>

    <!-- Custom Search Input -->
    <ng-template ng-option-tmp let-item="item" let-search="searchTerm">
        <div *ngIf="item.name.toLowerCase().includes(search.toLowerCase())">
            {{ item.name }}
        </div>
    </ng-template>

    <!-- Search Input -->
    <ng-template ng-search>
        <input 
            type="text" 
            class="custom-search-input" 
            placeholder="Search for cars..."
            [(ngModel)]="searchTerm" 
            (ngModelChange)="onSearch($event)"
        />
    </ng-template>
</ng-select>

Upvotes: 0

Lalit Bansal
Lalit Bansal

Reputation: 36

you can use "noFilteredDataAvailablePlaceholderText:'your message' " like:

  this.settings = {
    singleSelection: false,
    idField: 'tag_id',
    textField: 'tag_name',
    selectAllText: 'Select All',
    unSelectAllText: 'UnSelect All',
    itemsShowLimit: 3,
    allowSearchFilter: true,
    clearSearchFilter: true,
noFilteredDataAvailablePlaceholderText:'message you want to show'
  };

Upvotes: 1

Nikhil Londhe
Nikhil Londhe

Reputation: 51

UPDATE

Track pull request here

OLD

Try adding 'noDataAvailablePlaceholderText' property to this.settings as follows:

this.settings = {
   singleSelection: false,
   idField: 'tag_id',
   textField: 'tag_name',
   selectAllText: 'Select All',
   unSelectAllText: 'UnSelect All',
   itemsShowLimit: 3,
   allowSearchFilter: true,
   clearSearchFilter: true,
   noDataAvailablePlaceholderText: 'No items Matches'
};

Upvotes: 0

Related Questions