Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: MDB Auto Completer , Remote data not working

Mohammadu Abubakar free asked 5 years ago


Expected behavior I expect to see a dropdown list of matched labels

Actual behavior I Keep getting , "I have found no results

Resources (screenshots, code snippets etc.)

    staffSearchText = new Subject();

  staffResults: Observable<any>;
  //staff: any[] ;
  staff: any = {
    results: [
      {id: '12345', label: 'Mustapha Abubakar', code: 'O'},
      {id: '6789', label: 'Buhari Sani', code: 'DM'},
      {id: '3214', label: 'Aliyu Abu', code: 'PM'},
      {id: '78235', label: 'farida lawal', code: 'M'},

    ]
  }

  constructor(private memoService: MemoService) { }

  ngOnInit() {

    this.staffResults = this.staffSearchText
      .pipe(
        startWith(''),
        map((value: string) =>  this.filter(value))
      );
  }

  filter(value: string): string[] | undefined {

    const filterValue = value.toLowerCase();
    if (this.staff) {

      console.log('see this' + this.staff['results']);
      return this.staff['results'].filter((item: any) =>{console.log(item); return item.label.toLowerCase().includes(filterValue)});


    }
  }

html file

   <div class="md-form">

  <input
    type="text"
    class="completer-input form-control mdb-autocomplete"
    [ngModel]="staffSearchText | async"
    (ngModelChange)="staffSearchText.next($event)"
    [mdbAutoCompleter]="auto"
    placeholder="Memo From"
  />
  <mdb-auto-completer #auto="mdbAutoCompleter" textNoResults="I have found no results :(" [clearButton]="true">
    <mdb-option *ngFor="let option of staffResults | async" [value]="option.label">

        {{option.label}}
    </mdb-option>
  </mdb-auto-completer>
</div>



Arkadiusz Idzikowski staff commented 5 years ago

We couldn't reproduce the problem on the example you provided. Does this problem occur in this example or only when data is async and loaded from the server?

Are there any errors in the console? Did you import startWith operator correctly? It should work as expected when startWith operator is available.



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Opened

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 8.3.1
  • Device: HP
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No