An error is occurring with the autocomplete template.

[Rizwan]

Hi,

Why is SfAutoComplete showing an error, and how can it be fixed? I am using AutoComplete templates and need some UI in the AutoComplete. My template and list are okay, but it still shows an error. Error and screenshot are attached. Please suggest how to resolve the issue.

The error is displayed within the <ItemTemplate /> tag.

I require a solution in Blazor code.

 Thank you.

Attachment: error_8be71164.zip

[Yohapuja Selvakumaran]

Hi Rizwan,

Thank you for reaching out to us and for sharing the code snippet. We've used it to create a sample in the autocomplete with ItemTemplate, kindly check out the sample in the attachment.

Code Snippet:

@using Syncfusion.Blazor.Data

@using Syncfusion.Blazor.DropDowns

@using Syncfusion.Blazor.Inputs

 

<SfAutoComplete CssClass="e-small" TValue="string" TItem="EmployeeData" Placeholder="Auto Complete" FloatLabelType="FloatLabelType.Auto" Width="100%" DataSource="@Data" FilterType="Syncfusion.Blazor.DropDowns.FilterType.Contains">

    <AutoCompleteTemplates TItem="EmployeeData">

        <ItemTemplate>

                <span>@((context as EmployeeData).FirstName)</span>

        </ItemTemplate>

        <NoRecordsTemplate>

            <MudButton Class="border-0 rounded-0 px-2" FullWidth="true" ButtonType="MudBlazor.ButtonType.Button" Size="Size.Small" Variant="Variant.Text" StartIcon="icon-plus-redo-line">Add Option</MudButton>

        </NoRecordsTemplate>

    </AutoCompleteTemplates>

    <AutoCompleteFieldSettings Value="FirstName"></AutoCompleteFieldSettings>

</SfAutoComplete>

 

@code {

    public class EmployeeData

    {

        public string FirstName { get; set; }

        public string Country { get; set; }

    }

    List<EmployeeData> Data = new List<EmployeeData>

{

        new EmployeeData() { FirstName = "Andrew Fuller",  Country = "England" },

        new EmployeeData() { FirstName = "Anne Dodsworth", Country = "USA" },

        new EmployeeData() { FirstName = "Janet Leverling", Country = "USA" },

        new EmployeeData() { FirstName = "Laura Callahan", Country = "USA"},

        new EmployeeData() { FirstName = "Margaret Peacock", Country = "USA"},

        new EmployeeData() { FirstName = "Michael Suyama", Country = "USA", },

        new EmployeeData() { FirstName = "Nancy Davolio", Country = "USA"},

        new EmployeeData() { FirstName = "Robert King", Country = "England"},

        new EmployeeData() { FirstName = "Steven Buchanan", Country = "England"},

    };

}

 

<style>

    .country {

        right: 15px;

        position: absolute;

    }

</style>

Additionally, for more comprehensive information and detailed examples, we recommend exploring our documentation and demos.

Demos:https://blazor.syncfusion.com/demos/autocomplete/template?theme=fluent

Documentation: https://blazor.syncfusion.com/documentation/autocomplete/templates#item-template

If you continue to encounter the same issue, we kindly request that you make any necessary adjustments to the shared sample to replicate the problem exactly as you've experienced it. This will greatly assist us in pinpointing the issue more accurately and working towards an effective solution to address it.

Regards,

Yohapuja S

Attachment: Autocomplete_template_9fb3a939.zip