mdb-auto-completer : using an object as value


Topic: mdb-auto-completer : using an object as value

saltel-dev pro asked 2 months ago

Expected behavior All your examples send the result from the options as a string instead of the value. I would like to get, in the input model, the selected object. (not only the string)

Actual behavior I have tried to sort this out and i only found the following solution based on a type checking and selected event.

I m wondering if they are any more suitable way to achieve this.

Resources (screenshots, code snippets etc.)

                                <input name="textShipper" type="text"
                                    class="completer-input form-control mdb-autocomplete"
                                    [ngModel]="searchTextShipper | async"
                                    (ngModelChange)="searchTextShipper.next($event)"
                                    [mdbAutoCompleter]="autoShipper" placeholder="Choose your customer" />
                                <mdb-auto-completer #autoShipper="mdbAutoCompleter"
                                    textNoResults="I have found no results."
                                    (selected)="onItemShipperSelect($event)">
                                    <mdb-option *ngFor="let option of resultsShippers | async" [value]="option">
                                        {{ option.name }}
                                    </mdb-option>
                                </mdb-auto-completer>




 public searchTextShipper = new Subject();
  public resultsShippers: Observable<Array<EDS_Company>>;
  public dataShippers = new Array<EDS_Company>();

  ngOnInit() {
   this.loadShipper();

    this.resultsShippers = this.searchTextShipper.pipe(
      map((value: string | EDS_Company) => {
        if ((typeof value === 'string')) {
          const filterValue = (value as string).toLowerCase();
          return this.dataShippers.filter((item: any) => item?.name.toLowerCase().includes(filterValue));
        } else {
          return this.dataShippers.filter((item: any) => item?.name.toLowerCase().includes((value as EDS_Company).name));
        }
      }));
  }

  loadShipper() {
    this.edsCompagnyService.getEdsCompanies()
      .pipe(
        takeUntil(this.$unsubscribeNotifier)
        , map((array: Array<EDS_Company>) => {
          return array.filter(x => x.name && x.name !== '').map(value => {
            return value;
          });
        })
      )
      .subscribe((array: any) => {
        this.dataShippers = array;
      }
        , err => {
          setTimeout(
            () => this.toast.error('Shipper loading error(' + err + ')')
          );
        });
  }

  onItemShipperSelect($event) {
    if ($event) {
      this.searchTextShipper.next($event.text.name);
      this.shipperCardCode = null;
      this.shipperId = 0;
      this.crudFormHelper.formShipperAddress.value = $event.text.address;
      this.shipperCardCode = $event.text.cardCode;
      this.shipperId = $event.text.idCompany;
      console.log($event.text);
      // this.loadShipperContact();
    }
  }

Arkadiusz Idzikowski staff commented 2 months ago

Can you provide more details about the problem here and add use simple placeholder data so we can see what exactly is passed to the component options?


saltel-dev pro commented 2 months ago

An array of

export class EDS_Company {

    idCompany: number;
    cardCode: string;
    name: string;
    address: string;
}

Arkadiusz Idzikowski staff answered 2 months ago

Please take a look at the 'displayValue' example in our documentation:

https://mdbootstrap.com/docs/angular/forms/autocomplete/#display-value

You need to use this option if you want to have options with values different than the values displayed in the component dropdown.


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: Angular
  • MDB Version: 9.2.0
  • Device: Pc
  • Browser: Chrome
  • OS: windows 10
  • Provided sample code: No
  • Provided link: No