Looking for the example of Autocomplete


Topic: Looking for the example of Autocomplete

Gaurav Garg pro asked 7 years ago

Hi Team, I am looking for the example of autocomplete. Where can i find an example? I guess mdb-completer  is a component for autocomplete. Please help !!  

Damian Gemza staff commented 7 years ago

Dear Gaurav Garg, Here you can find live example of Autocomplete: https://mdbootstrap.com/angular/components/inputs/#autocomplete Best Regards, Damian

Gaurav Garg pro answered 7 years ago

Hi Damian, Thanks for the example link but this is a very basic example. If i have to customise the autocomplete template then how to do that? Regards, Gaurav

Damian Gemza staff commented 7 years ago

Dear Gaurav, in which way you want to customize autocomplete?

Gaurav Garg pro commented 7 years ago

Hi Damian, Few customisation: 1) Height and width of the autocomplete list item. 2) I am using reactive form module. I am using valueChanges. I don't want to run valueChanges for onMouseOver event also. 3) I have two types of title. if title b is not available then display title a. If title b is available then i have to display concatenated title but i don't know how to do that. 4) How to display description and Images. It is very similar to Google Map City Autocomplete.

Gaurav Garg pro answered 7 years ago

Hi Damian, Few customisation: 1) Height and width of the autocomplete list item. 2) I am using reactive form module. I am using valueChanges. I don’t want to run valueChanges for onMouseOver event also. 3) I have two types of title. if title b is not available then display title a. If title b is available then i have to display concatenated title but i don’t know how to do that. 4) How to display description and Images. It is very similar to Google Map City Autocomplete.

Damian Gemza staff answered 7 years ago

Dear Gaurav, 1st question: I can't imagine, in which situation you need to change width of autocomplete items, but you can achieve it by adding styles into your global stylesheet:
.completer-dropdown {

.completer-row {

height: 100px;

width: 50px;

}

}
3rd question: Title is label? If yes, try this:
public title1: string = 'title1';

public title2:string=' title2';

ngAfterViewInit() {

if (this.title2) {

this.searchData[0].color = this.title1 + this.title2;

} else if (!this.title2) {

this.searchData[0].color = this.title1;

}

}
For more informations, please check source of our autocomplete: https://github.com/oferh/ng2-completer
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
  • User: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No