Access on filter event in mdb-select

Topic: Access on filter event in mdb-select

Taher hendawi free asked 3 years ago

I am using mdb-select component and expected that if I enabled search/filtering, that I could access the fired event, when the user types in the search input.

I've very long list of selections which is fetched via http service and I need to fetch the respective data accordign to users input.

Add comment

JeroenVunderink premium answered 3 years ago

0 0 Best answer

I don't use mbd-select but the mdb-autocomplete.
Took me some time also but here is the code that works for me:

TS file:

<pre class="prettyprint"><code>import { OwnerService } from 'src/app/services/owner.service';

export class EditDogForm implements OnInit {

dogOwner: IOwner;
 /*
 * Owner lookup
 */
 private _owners = new BehaviorSubject<IOwner[]>(null);
 owners = this._owners.asObservable();

constructor(private ownerApi: OwnerService){}

/*
   * On Init
   */
  ngOnInit(): void {
    this.dogForm = new FormGroup({
      owner: new FormControl('', [Validators.required])
    });
}

SetValues() {
     // This is workaround for the mb-autocomplete not be able to show the displayfield yet in the HTML
      this.dogForm.controls.owner.setValue(this.currentDog.Owner.Fullname);
}

/*
   * Display Owner Value
   */
  onDisplayOwnerValue(selectedValue: IOwner) {
    this.dogOwner = selectedValue;
    return selectedValue.Name;
  }

/*
   * Retrieving values
   */
  retrieveOwners(value: string) {
    var filterValue: string;
    this.dogOwner = null;

if (value === null) {
      filterValue = "";
    } else if (typeof (value) === "object") {
      filterValue = (value as IOwner).Name.toLowerCase();
    } else {
      filterValue = value.toLowerCase();
    }

if (filterValue.length === 0 || (this.dogOwner && filterValue == this.dogOwner.Name)) {
 this._owners.next(null); // Empty List
 } else {
 this.ownerApi.getOwners(filterValue).subscribe(results => {
 this._owners.next(results);
 });
 }
 }
</code></pre>

*The HTML File *

<pre class="prettyprint"><code> 
 <div class="md-form" style="text-align: left;">
 <input formControlName="owner" type="text"
 class="completer-input form-control form-control-sm mdb-autocomplete"
 (ngModelChange)="retrieveOwners($event)" [mdbAutoCompleter]="owner" placeholder="Select the owner" />
 <mdb-auto-completer name="ownerlist" #owner="mdbAutoCompleter" textNoResults="No owners found"
 [displayValue]="onDisplayOwnerValue">
 <mdb-option *ngFor="let owner of owners | async" [value]="owner">{{ owner.Name }}</mdb-option>
 </mdb-auto-completer>
 <label for="owner" class="active">Owner</label>
 </div>
</code></pre>

Please insert min. 20 characters.

I don't use mbd-select but the mdb-autocomplete. Took me some time also but here is the code that works for me:

TS file:

import { OwnerService } from 'src/app/services/owner.service';

export class EditDogForm implements OnInit {

  dogOwner: IOwner;
 /*
   * Owner lookup
   */
  private _owners = new BehaviorSubject<IOwner[]>(null);
  owners = this._owners.asObservable();

  constructor(private ownerApi: OwnerService){}

  /*
   * On Init
   */
  ngOnInit(): void {
    this.dogForm = new FormGroup({
      owner: new FormControl('', [Validators.required])
    });
}

SetValues() {
     // This is workaround for the mb-autocomplete not be able to show the displayfield yet in the HTML
      this.dogForm.controls.owner.setValue(this.currentDog.Owner.Fullname);
}

  /*
   * Display Owner Value
   */
  onDisplayOwnerValue(selectedValue: IOwner) {
    this.dogOwner = selectedValue;
    return selectedValue.Name;
  }

 /*
   * Retrieving values
   */
  retrieveOwners(value: string) {
    var filterValue: string;
    this.dogOwner = null;

    if (value === null) {
      filterValue = "";
    } else if (typeof (value) === "object") {
      filterValue = (value as IOwner).Name.toLowerCase();
    } else {
      filterValue = value.toLowerCase();
    }

    if (filterValue.length === 0 || (this.dogOwner && filterValue == this.dogOwner.Name)) {
      this._owners.next(null); // Empty List
    } else {
      this.ownerApi.getOwners(filterValue).subscribe(results => {
        this._owners.next(results);
      });
    }
  }

*The HTML File *

        <!--
          Owner field
        -->
        <div class="md-form" style="text-align: left;">
          <input formControlName="owner" type="text"
            class="completer-input form-control form-control-sm mdb-autocomplete"
            (ngModelChange)="retrieveOwners($event)" [mdbAutoCompleter]="owner" placeholder="Select the owner" />
          <mdb-auto-completer name="ownerlist" #owner="mdbAutoCompleter" textNoResults="No owners found"
            [displayValue]="onDisplayOwnerValue">
            <mdb-option *ngFor="let owner of owners | async" [value]="owner">{{ owner.Name }}</mdb-option>
          </mdb-auto-completer>
          <label for="owner" class="active">Owner</label>
        </div>

Grzegorz Bujański staff commented 3 years ago

Hi. I understand that everything is already working for you?

Taher hendawi free commented 3 years ago

Hi @JeroenVunderink. Thanks for your answer! I have used auto-completer component too und solved my problem :)

Add comment

Wojciech Marciniak free answered 3 years ago

0 0 Best answer

Try mdb-select-2

The example below. The Client is a class consisting of just an ID (number) and a name (string). My have many more fields, however. The array Client[] is delivered by the back end via http client function defined in service instance (imported as private in a constructor).

where TS is:

<pre class="prettyprint"><code>filteredOptions: Observable<any[]>;
clients: Client[] = [];
searchText = new Subject();

ngOnInit(): void {
    this.getCombos();
 }

filter(value: string): any[] {
    const filterValue = value.toLowerCase();
    return this.clients.filter((client: any) => client.name.toLowerCase().includes(filterValue));
  }

getCombos() {
    this.service.clients().subscribe((data: Client[]) => {
      this.clients = data;
      this.filteredOptions = this.searchText.pipe(
        startWith(''),
        map((name: string) => this.filter(name))
      );      
    });
  }

export class Client {
 id: number;
 name: string;
}
</code></pre>

Please insert min. 20 characters.

Try mdb-select-2

The example below. The Client is a class consisting of just an ID (number) and a name (string). My have many more fields, however. The array Client[] is delivered by the back end via http client function defined in service instance (imported as private in a constructor).

<mdb-select-2 [(ngModel)]="client">
            <mdb-select-filter
              [ngModel]="searchText | async"
              (ngModelChange)="searchText.next($event)">
            </mdb-select-filter>
            <mdb-select-option *ngFor="let el of filteredOptions | async" [value]="el">{{el.name}}</mdb-select-option>
          </mdb-select-2>

where TS is:

filteredOptions: Observable<any[]>;
clients: Client[] = [];
searchText = new Subject();

ngOnInit(): void {
    this.getCombos();
 }

filter(value: string): any[] {
    const filterValue = value.toLowerCase();
    return this.clients.filter((client: any) => client.name.toLowerCase().includes(filterValue));
  }

getCombos() {
    this.service.clients().subscribe((data: Client[]) => {
      this.clients = data;
      this.filteredOptions = this.searchText.pipe(
        startWith(''),
        map((name: string) => this.filter(name))
      );      
    });
  }

export class Client {
  id: number;
  name: string;
}

Taher hendawi free commented 3 years ago

Hi. could you please add links to documentation of mdb-select-2 and mdb-select-filter? I have solved my issue with auto-completer but it is useful to know that there is another way with mdb-select

Wojciech Marciniak free commented 3 years ago

All you have here: https://mdbootstrap.com/docs/angular/forms/select/ or https://mdbootstrap.com/docs/angular/forms/multiselect/ but as I can see it now, it requires PRO license.

Taher hendawi free commented 3 years ago

thanks, I have pro license :)

Add comment

Write

Create snippet

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: 8.8.0
Device: laptop
Browser: chrome
OS: windows
Provided sample code: No
Provided link: No

Taher hendawi

15Support score
3Questions 0Answers 0Snippets