how to add icon on the right end of AutoComplete?

Question

I'm using AutoComplete, how can i add Icon on the right end (same as above)?I was able to do this with Textbox, but not AutoComplete

Vinitha Jeyakumar · Answer

Hi Solomon,

Greetings from Syncfusion support

We have validated your query “how to add icon on the right end of AutoComplete?”

You can add the search icon to the AutoComplete component by overriding the content of the existing icon. The following code demonstrates how to add a search icon to the AutoComplete component.

Code snippet:

<SfAutoComplete TValue="string" TItem="GameFields" Width="300px" ShowPopupButton="true" Placeholder="e.g. Basketball" DataSource="@Games">

<AutoCompleteFieldSettings Value="Text"></AutoCompleteFieldSettings>

</SfAutoComplete>

<style>

.e-ddl.e-input-group.e-control-wrapper .e-ddl-icon::before {

content: '\e724';

font-family: 'e-icons';

font-size: 16px;

opacity: 0.4;

}

</style>

@code{

public class GameFields

{

public string ID { get; set; }

public string Text { get; set; }

}

public List<GameFields> Games = new List<GameFields>()

{

new GameFields(){ ID= "Game1", Text= "American Football" },

new GameFields(){ ID= "Game2", Text= "Badminton" },

new GameFields(){ ID= "Game3", Text= "Basketball" },

new GameFields(){ ID= "Game4", Text= "Cricket" },

new GameFields(){ ID= "Game5", Text= "Football" },

};

}

Documentation: https://blazor.syncfusion.com/documentation/autocomplete/style#adding-search-icon-in-the-blazor-autocomplete-component

Please check the above code snippet and documentation for your reference,

Regards,

Vinitha.