Autocomplete displayValue and manually set value

Hi, Here are the request files with a simple static example: [HTML]:

<div class="md-form">
  <input #userInput2="ngModel" type="text" class="completer-input form-control " [(ngModel)]="SearchText" [mdbAutoCompleter]="auto2"
         placeholder="Nom ou matricule" (focusout)="OnLeave()"/>
  <mdb-auto-completer #auto2="mdbAutoCompleter" [displayValue]="displayFn"  >
    <mdb-option *ngFor="let user of userList" [value]="user">
      <div class="d-flex flex-column">
        <span><strong>{{ user.FullName }}</strong></span>
      </div>
    </mdb-option>
  </mdb-auto-completer>
</div>

[TS]

import {AfterViewInit, Component, OnInit, ViewChild} from '@angular/core';
import {debounceTime, filter} from 'rxjs/operators';

@Component({
  selector: 'app-test-mdb-autocomplete',
  templateUrl: './test-mdb-autocomplete.component.html',
  styleUrls: ['./test-mdb-autocomplete.component.css']
})
export class TestMdbAutocompleteComponent implements OnInit,AfterViewInit {

  constructor() {
  }

  userStaticList = [
    {FullName: 'Marine', ID: '1'},
    {FullName: 'Fred', ID: '2'},
    {FullName: 'Marinette', ID: '3'},
    {FullName: 'Marilou', ID: '4' }
    ];
  userList = [];
  @ViewChild('userInput2') private userInput2;

  SearchText = '';
  SelectedUser: null;

  ngOnInit(): void {
    //Render [object Object] instead of user.FullName (Marine) in the search field
    //displayFn not called
    this.SearchText = this.userStaticList[0];
  }

  ngAfterViewInit() {
    this.userInput2.valueChanges
      .pipe(debounceTime(300),
        filter(val => typeof val === 'string')
      ).subscribe(val => {
        this.userList = [];
        this.userStaticList.forEach(elem => {
          if (elem.FullName.toLowerCase().startsWith(val.toString().toLowerCase())) {
            this.userList.push(elem);
          }
        });
      }
    );

    this.userInput2
      .valueChanges
      .pipe(filter(theNewValue => typeof theNewValue !== 'string'))
      .subscribe(theNewValue => {
          this.SelectedUser = theNewValue;
        });

  }

  displayFn(user) {
    let nameOfUser= (user ? user.FullName : '');
    console.log('DisplayFn:'+user);
    console.log('DisplayFn returned value:'+nameOfUser);
    return nameOfUser;
  }

  OnLeave() {
    if (this.userInput2.value) {
      if (this.SelectedUser) {
        this.SearchText = this.SelectedUser;
      } else {
        this.SearchText = '';
      }
    }else
    {
      this.SelectedUser=null;
    }
  }
}

Thanks

In this case SearchText should be of type string and you try to overwrite it with object here:

this.SearchText = this.userStaticList[0];

and here:

this.SearchText = this.SelectedUser;

In your case it should look like this:

this.SearchText = this.userStaticList[0].FullName;
this.SearchText = this.SelectedUser.FullName;

If you don't use TSLint it is good idea to configure it in your IDE/Code editor, because it will automatically let you know about problems with types.