Open Autocomplete on click #5118
-
Is there any way to open the autocomplete dropdown when the search field is click? (Instead of having to wait for the user to type before opening it) I've tried the OpenDropdown method but nothing happens (also tried using it in a button outside the autocomplete) I must use ReadData as the list of elements comes from an external api based on user selection. EDIT: Also, if I bind the Opened event (that is associated with dropdown), it is triggered when I click the search input, but the dropdown is not displayed. Here's the code for it: <Div @onclick="OpenDropdown">
<Autocomplete @ref="autocomplete" TItem="SpecialtyDto"
TValue="string"
Data="@ReadDataSpecialities"
ReadData="OnHandleReadData"
TextField="@(( item ) => item.Name)"
ValueField="@(( item ) => item.Name)"
Placeholder="Search..."
SelectionMode="AutocompleteSelectionMode.Multiple"
CloseOnSelection="false"
FreeTyping="true"
@bind-SelectedValues="multipleReadDataSelectionData"
@bind-SelectedTexts="multipleReadDataSelectionTexts"
Opened="Opened">
<NotFoundContent> Sorry... @context was not found! :( </NotFoundContent>
</Autocomplete>
</Div>
@code {
Autocomplete<SpecialtyDto, string> autocomplete;
private List<string> multipleReadDataSelectionData = new();
private List<string> multipleReadDataSelectionTexts = new();
public IEnumerable<SpecialtyDto> ReadDataSpecialities;
private async Task OpenDropdown()
{
await autocomplete.OpenDropdown();
}
private async Task OnHandleReadData(AutocompleteReadDataEventArgs autocompleteReadDataEventArgs)
{
if (!autocompleteReadDataEventArgs.CancellationToken.IsCancellationRequested)
{
await Task.Delay(100);
if (!autocompleteReadDataEventArgs.CancellationToken.IsCancellationRequested)
{
ReadDataSpecialities = specialities.Where(x => x.Name.StartsWith(autocompleteReadDataEventArgs.SearchValue, StringComparison.InvariantCultureIgnoreCase));
}
}
}
List<SpecialtyDto> specialities = new()
{
new SpecialtyDto()
{
Name="Especialidad 1"
},
new SpecialtyDto()
{
Name="Especialidad 2"
},
new SpecialtyDto()
{
Name="Especialidad 3"
},
new SpecialtyDto()
{
Name="Especialidad 4"
},
new SpecialtyDto()
{
Name="Especialidad 5"
},
};
} EDIT2: When testing in the Demo page, only one of the Autocomplete configurations is opened when clicking the search input. I've copied the options for it, but still doesn't open in mine. |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 1 reply
-
There's a parameter MinLength that you must set to 0. |
Beta Was this translation helpful? Give feedback.
There's a parameter MinLength that you must set to 0.