Highlight the matched character in filtering in ejs-combobox in angular

Question

Hi team,I am using ejs-combobox, In filtering I want to highlight the searched characters. please provide me a solution of it as you give highlight property in ejs-autocomplete.Please find the required attachment belowWarm RegardsNagendra GuptaAttachment: highlightText_4fc9c425.zip

Ponmani Murugaiyan · Accepted Answer

Hi Nagendra,

Thanks for contacting Syncfusion support.

Query: I am using ejs-combobox, In filtering I want to highlight the searched characters. please provide me a solution of it as you give highlight property in ejs-autocomplete.

By using the highlightSearch method, you can highlight the matched character in ComboBox filtering. We have prepared sample and attached below for reference.

[app.component.html]

<ejs-combobox id="ddlelement" [dataSource]="data" [query]="query" [fields]="fields" [placeholder]="text" [allowFiltering]="true" [sortOrder]="sorting" (filtering)="onFiltering($event)"></ejs-combobox>

[app.component.ts]

public query: Query = new Query().from("Customers").select(["ContactName", "CustomerID"]).take(6);

// maps the appropriate column to fields property

public fields: Object = { text: "ContactName", value: "CustomerID", itemCreated: (e: any) => {

highlightSearch(e.item, this.queryString, true, "Contains");

}

};

// set the placeholder to the DropDownList input

public text: string = "Select a customer";

//sort the result items

public sorting: string = "Ascending";

public queryString: string;

//Bind the filter event

public onFiltering: any = (e: FilteringEventArgs) => {

// take text for highlight the character in list items.

this.queryString = e.text;

let query: Query = new Query().from("Customers").select(["ContactName", "CustomerID"]);

query = e.text !== "" ? query.where("ContactName", "startswith", e.text, true) : query;

e.updateData(this.data, query);

};

Sample: https://stackblitz.com/edit/angular-zevu6y-4taeos?file=app.component.ts

Regards,

Ponmani M