Change color of matching characters in autocomplete with Angular/TypeScript-CodePudding

I have an autocomplete search field connected to my apiurl

What I wan't to do (but I have no idea how can I do this with TypeScript or Angular)is: change text color and make them bold ONLY to matching letters in dropdown with those whic i write in input field..

ANGULAR:

            <form >
            <mdb-form-control >
                <input mdbInput autocomplete="off" type="text" list="joblistOptions"  name="text" [(ngModel)]="text" (ngModelChange)="onChange()"/>
                <button  type="submit"><i ></i></button>
                <label mdbLabel  for="text">Vpišite poklic, o katerem bi želeli izvedeti več</label>
            </mdb-form-control>
            <div *ngIf="showResults" >
                <ul >
                    <li  *ngFor="let job of filteredJobs" [routerLink]="['/job-description',job.nadnaslov]">{{ job.nadnaslov }}</li>
                </ul>
            </div>
        </form>

TYPESCRIPT:

export class SearchComponent implements OnInit {
text: string = '';
showResults: boolean = false;
testJobs: any;
filteredJobs: any;

private jobsSubs: Subscription = new Subscription();

constructor(private jobsService: JobsService) { }

ngOnInit() {
  this.getAllJobs();
}

onChange() {
  if (this.text.length > 0) {
  this.showResults = true;
  } else {
    this.showResults = false;
  }

if (this.text.length === 1) {
  //console.log('test');
  this.filteredJobs = this.testJobs.filter((job:any) => job.nadnaslov.split('')[0] === this.text);
} 
else if (this.text.length >= 2){
  this.filteredJobs = this.testJobs.filter((testJobs:any) => testJobs.nadnaslov.toLocaleLowerCase().includes(this.text.toLocaleLowerCase()));
} 
else {
  this.filteredJobs = [];
}

if (this.filteredJobs.length === 0) {

}
}

getAllJobs() {
  this.jobsService.getJobs().subscribe((response: any) => {
    this.testJobs = response;
    this.filteredJobs = response;
  });
}
}

Thank you for your help

CodePudding user response：

Here's a working solution: https://stackblitz.com/edit/plain-angular6-fmdzze

Take note: it's a basic example, but keeping the appropriate logic and structure of your project (the parts that you shared). You will have to play with html template though, to make it work for your mdb-form-control. You'd also need to add your [routerLink].

Essentially, I'm changing the .nadnaslov value for a job that matches the input text, by wrapping the matching substring with <span> that has a style added to it (like color: red), and then displaying it as innerHtml of a li.

The method first removes all added tags (if the filteredJobs is already changed by previous typing) to return to 'original' .nadnaslov values. Then your own logic goes - populating the filteredJobs. After that, if filteredJobs has content (length > 0), I wrap the .nadnaslov as explained.

Note that there's a pipe added, to block sanitization of html.

CodePudding user response：

You'll need to update DOM for changing colors.

I would suggest making some changes in this piece of code to add 2 elements, one for bold, and changed color text.

<li  *ngFor="let job of filteredJobs" [routerLink]="['/job-description',job.nadnaslov]">
   <span >{{job.boldText}}</span>
   <span>{{ job.nadnaslov }}</span>
</li>

Then you can add a CSS class for each color, and replace it by adding a new attribute to each job named class.

<li  *ngFor="let job of filteredJobs" [routerLink]="['/job-description',job.nadnaslov]">
   <span >{{job.boldText}}</span>
   <span>{{ job.nadnaslov }}</span>
</li>

After this, you will need to update your ts file so that you can get, and update job objects in the array accordingly.

Not a perfect solution, but it'll work for you