AddIcon on sfAutocomplete
I would like to transform a component that I created.
I based myself on an sfTextBox in order to be able to have an icon on the left and a right in order to have actions on the click of these icons.
These two icons are added by the "AddIconAsync" method.
To date I do not have this method on sfAutoComplete and therefore cannot add my two icons.
Or how to have auto-completion on the sfTextBox?
How to do ?
and my goal is not to override the already existing sfAutoComplete icon
Thanks for your help.
Hi Castandet Cyril,
Thank you for reaching out to us. We've thoroughly reviewed your requirement and have devised a solution that utilizes the "created" event alongside JSInterop to achieve the desired functionality. Please find below the code snippet for your reference:
|
[Index.razor]
<SfAutoComplete TValue="string" TItem="Country" Placeholder="e.g. Australia" DataSource="@LocalData"> <AutoCompleteFieldSettings Value="Name" /> <AutoCompleteEvents TValue="string" TItem="Country" Created="OnCreate"></AutoCompleteEvents> </SfAutoComplete>
@code {
public class Country { public string Name { get; set; } public string Code { get; set; } }
List<Country> LocalData = new List<Country> { new Country() { Name = "Australia", Code = "AU" }, new Country() { Name = "Bermuda", Code = "BM" }, new Country() { Name = "Canada", Code = "CA" }, new Country() { Name = "Cameroon", Code = "CM" }, new Country() { Name = "Denmark", Code = "DK" } };
public async void OnCreate() { await JsRuntime.InvokeAsync<string>("CStoJSCall"); } }
<style> span.e-search {
line-height: 2; min-width: 28px; text-align: center; font-size: 16px; }
</style>
[Layout.cshtml]
<script> function CStoJSCall() { var span = document.createElement('span'); span.setAttribute('class', 'e-icons e-search'); var inputContainer = document.querySelector(".e-ddl"); inputContainer.appendChild(span); span.addEventListener('click', function () { // Your click event handling code goes here console.log("Search icon clicked"); }); } </script> |
We have also attached a sample for your reference. We believe this implementation will effectively address your requirement. Should you have any further inquiries or require additional assistance, please don't hesitate to reach out.
Regards,
Yohapuja S
Attachment: Autocomplete_icon_70c962e2.zip
