How can I do loop create the autocomplete from object list?

[NeverMind-orz]

I would like to do like this. But it does not work.

@foreach (var item in DataList) {
<FluentAutocomplete TOption="SomeClass" AutoComplete="off" Autofocus="true" OnOptionsSearch="@OnSearchAsync" MaximumSelectedOptions="1" OptionText="@(i => i.Name)" @bind-SelectedOption="@item" />
}

Could you suggest the best way to make loop create dynamic autocomplete for edit value of item in list?

[vnbaaij]

Check the examples at https://www.fluentui-blazor.net/Autocomplete

[dvoituron]

Try to use a for loop (not foreach), as .NET can delay rendering when you use Linq (or foreach).

[NeverMind-orz]

Yes, I have already tried many ways but still not work. Like this.

@for(int index = 0; index < DataList.Count; index++)
{
<FluentAutocomplete TOption="SomeClass" AutoComplete="off" Autofocus="true" OnOptionsSearch="@OnSearchAsync" MaximumSelectedOptions="1" OptionText="@(i => i.Name)" @bind-SelectedOption="@Datalist[index]" />
}

And

@for(int index=0; index < DataList.Count; index++)
{
<FluentCombobox TOption="SomeClass"
Items="@sourcelist"
OptionText="@(i => i.Text)"
Multiple="false" @bind-SelectedOption="@Datalist[index]" />
}

[NeverMind-orz]

Or

FluentCombobox TOption="SomeClass" Items="@sourcelist" OptionText="@(i => i.Text)" Multiple="false" SelectedOptionChanged="OnOptionChanged" SelectedOption="DataList[index]"

The last solution stucked when load the page because it call OnOptionChanged and keep sending null value into function infinity.

Sorry for double post I don't why github doesn't show my code.

[vnbaaij]

This is more a general Blazor question than a specific library one.

When working with this kind of dynamics, you probably need to add a @key directive. See https://learn.microsoft.com/en-us/aspnet/core/blazor/components/element-component-model-relationships?view=aspnetcore-9.0

Also, you probably need to copy the loop index to a local variable. See https://stackoverflow.com/questions/71807498/blazor-bind-each-element-in-foreach-loop-to-corresponding-array-index

If you want to use a code block in comments her, you need to enclose the code with 3 tickmarks (`)

[NeverMind-orz]

I see. Thank you for your help.