Sear icom not showing in AutoComplete

[KINS]

I have an Autocomplete control.I would like to add search icon in autocomplet.I have refer below link but its working in bootstrap only not as material class

https://blazor.syncfusion.com/documentation/autocomplete/style

screencast:-

https://www.screencast.com/t/vkmm7DBaH

Note:-

I need to show search icon in right side

Attachment: DataentryUI_d6cc3c7f.zip

[KINS]

awaiting for reply

[Vinitha Jeyakumar]

Hi Kins, 

 

 

Greetings from Syncfusion support, 

 

 

We have validated your query “Search icon not showing in AutoComplete” 

 

The icon content will be differ for each themes. For the material theme, please find the code below, 

 

Code snippet: 

<style> 

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

        content: '\e993'; 

        font-family: 'e-icons'; 

        font-size: 16px; 

        opacity: 0.4; 

    } 

</style> 

 

 

Documentation: https://blazor.syncfusion.com/documentation/appearance/icons#icons-list 

 

Please check the code and documentation and let us know if it resolves your issue 

 

Regards, 

Vinitha 

[KINS]

Thanks working fine

but I need search icon in left side width left padding

[Ponmani Murugaiyan]

Hi KINS, 

Thanks for the update. 

Query: But I need search icon in left side width left padding. 

Based on your information, we have prepared sample for AutoComplete component with search icon on the left side. We have achieved your requirement by inserting the icon element before the input as like below code snippet. In Blazor, we couldn’t access the DOM elements so achieved using JS Interop.  

[SRF.razor] 

 

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

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

      <AutoCompleteEvents TValue="string" TItem="GameFields" Created="OnCreate"></AutoCompleteEvents> 

</SfAutoComplete> 

@code { 

    @inject IJSRuntime JSRuntime 

    public async Task OnCreate() 

    { 

        await JSRuntime.InvokeVoidAsync("created", "AutoComplete"); 

    } 

} 

[dropdown.js] 

 

window.created = function (id) { 

    var autoCompleteObj = document.getElementById(id); 

    var iconEle = autoCompleteObj.parentElement.getElementsByClassName('e-ddl-icon')[0]; 

    autoCompleteObj.parentNode.insertBefore(iconEle, autoCompleteObj); 

} 

[Host.cshtml] 

 

<script src="~/dropdown.js"></script> 

Output: 

 

Also, if you would like add the padding for search icon element, use the below styles to override. 

<style> 

    span.e-input-group-icon.e-ddl-icon.e-icons { 

        padding-right: 7px; 

        padding-left: 2px; 

    } 

</style> 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/DataentryUI-1291166337 

Please get back us if you need further assistance. 

Regards, 

Ponmani M