MDB Auto Completer , Remote data not working


Topic: MDB Auto Completer , Remote data not working

Mohammadu Abubakar 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

Open

Specification of the issue
  • User: 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