Topic: Auto Complete (id and value)

adanilson free asked 4 years ago


Hello, Iam implementing the mdb-auto-completer, and i want show the description of item and save the id. How i can do that ? Iam new on angular. I try in mdb-auto-completer dont work, try in mdb-option didn´t work too.

my code :

Nome: {{option.nomeutilizador}} Email: {{option.email}}
          </mdb-option>
        </mdb-auto-completer>
      </div>
    </div>

export class VerificacaoCodigoFormComponent extends BaseResourceFormComponent implements OnInit {

@ViewChild(MdbAutoCompleterComponent) completer: MdbAutoCompleterComponent; searchText = ''; results: any; //data: any = ['red', 'green', 'blue', 'cyan', 'magenta', 'yellow', 'black']; data: any = ['red']; filteredTeste: any;

optionUtilizador: Array;

constructor( protected verificacaoCodigoService: VerificacaoCodigoService, protected utilizadoresService: UtilizadoresService, protected injector: Injector ) { super(injector, new VerificacaoCodigo(), verificacaoCodigoService, VerificacaoCodigo.fromJson); // this.results = this.searchEntries(this.searchText); }

ngOnInit() { this.loadUtilizadores(); // Como ele subscreve a class BaseResourceFormComponent // e para garantir que os metodos da classe BaseResourceFormComponent, tais como buildform, pomos:

super.ngOnInit();

}

protected buildResourceForm() {

this.resourceForm = this.formBuilder.group({
  id: [null],
  codigoverificacao: ["", [Validators.required]],
  dataexpiracao: ["", [Validators.required]],
  activo: ["", [Validators.required]],
  utilizador_id: ["", [Validators.required]],
  utilizador_id2: ["", [Validators.required]],
});

}

getDataItems() { // console.log("Teste1 ",this.optionUtilizador); // console.log("Teste2 ",this.data);

return this.data;

}

searchEntries(term: string) { // console.log(" searchEntries ",this.data); // console.log(" searchEntries2 ",this.optionUtilizador); return of(this.getDataItems().filter((data: any) => data.toString().toLowerCase().includes(term.toString().toLowerCase()))); }

getFilteredData() { // this.results = this.searchEntries(this.searchText); if (this.searchText.length > 0) { this.utilizadoresService.getAllPesquisarNome(this.searchText) .pipe( debounceTime(300) ) .subscribe(

      (utilizador: any) => {

        if (utilizador.length > 0) {
          // let listUtilizador: any[] = [];
          // utilizador.forEach(utilizador => {
          //   let option = { value: utilizador.id, label: utilizador.nomeutilizador };
          //   listUtilizador.push(option);

          // });
          // this.optionUtilizador = listUtilizador.slice();
          //this.results = ['red', 'green', 'blue', 'cyan', 'magenta', 'yellow', 'black'];
          this.results = utilizador;
          console.log("utilizador --- ", utilizador);
        }

      }
    );

}

}

onChange() { this.getFilteredData(); }

ngAfterViewInit() { this.completer.selectedItemChanged().subscribe((data: any) => { this.searchText = data.text; this.getFilteredData(); console.log('Selected item change', data); }); }

ngOnDestroy(): void { //Called once, before the instance is destroyed. //Add 'implements OnDestroy' to the class.

}

}


adanilson free answered 4 years ago


Yes, I want display a object, in the page display the description and in the component save de id in form control.

like in select :

Open this select menu One Two Three


Damian Gemza staff commented 4 years ago

Again I don't understand your problem. Do you want to:

1) Display object which you have selected in mdb-auto-completer on the page where the component is used, 2) In which component do you want to save the id in the form control,

I don't know what do you mean by saving the id - what is id? Property from your object, id of the HTML element, template reference to some element?

And what do you want to do after saving this strange id?


adanilson free answered 4 years ago


How can i still show the value in page and in component ad the id in to formcontrol?


Damian Gemza staff commented 4 years ago

Dear @adanilson

I'm afraid, that I don't understand you well. Could you please rewrite your question? What exactly do you want to achieve?

Do you want to display the selected value from mdb-auto-completer component on the page? Or something else?

Best Regards,

Damian



Please insert min. 20 characters.

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: 7.5.4
  • Device: Mac Book
  • Browser: Chrome
  • OS: Mac IOS
  • Provided sample code: No
  • Provided link: No