CODEWITHSUNDEEP
blazortypeaheadblazored
parente89
parente89

Reputation: 115

Blazored Typeahead import value selected from database

How do i set the selected value in the product list when editing?

<Blazored.Typeahead.BlazoredTypeahead SearchMethod="RicercaCategoria" 
                                      @bind-Value="categoriaSelezionato" 
                                      EnableDropDown="false" 
                                      Placeholder="Scegli o aggiungi la Categoria">
    <SelectedTemplate>@context.NomeCategoria</SelectedTemplate>
    <ResultTemplate>@context.NomeCategoria</ResultTemplate>
</Blazored.Typeahead.BlazoredTypeahead>

From a list I get the categories to see. From a database instead I recover the record that interests me

Upvotes: 2

Views: 2139

Answers (2)

Tore Aurstad
Tore Aurstad

Reputation: 3826

I found also out that I use the Blazored.TypeAhead.BlazoredTypeahead control in a MAUI Blazor app I wrote a year ago using multilingual translation and Azure AI services. Here is how I se it up, I can see the values to select and also the selected value using this control.

Typeahead control showing available options

And after selecting "French" for example, I can see that selected value. I use a delegate here for the ConvertMethod to set the value and set the Context here to TargetLanguageContext. There are also specific templates for result template and selected template.

Selecting value in the typeahead control

It looks from your answers that you have not managed to show the values without using Esc key. The markup in my .razor file using this component looks like this:

  <Blazored.Typeahead.BlazoredTypeahead placeholder="Select target language"
       ConvertMethod="(NameValue targetLanguage) => targetLanguage?.Value"
       EnableDropDown="true"
       Debounce="400"
       Context="TargetLanguageContext" MaximumSuggestions="50"
       SearchMethod="SearchAvailableLanguages"             
       @bind-Value="Model.TargetLanguage"> 
       <SelectedTemplate Context="TargetLanguageContext">
           @TargetLanguageContext
       </SelectedTemplate>
       <ResultTemplate Context="TargetLanguageContext">
           @TargetLanguageContext.Name
       </ResultTemplate>
  </Blazored.Typeahead.BlazoredTypeahead>

So for completeness, I include the markup here in case it helps.

Upvotes: 0

Steve Greene
Steve Greene

Reputation: 12314

You need to setup an event to do that. You have to modify your syntax slightly as described in the documentation:

Replace your @bind-Value with (guessing at class names):

Value="categoriaSelezionato"
ValueChanged="@( (Categoria c) => SelectedCategoriaChanged(c) )"
ValueExpression="@( () => categoriaSelezionato )"

You may also need TValue and TItem, but I did not.

Then handle the event:

private void SelectedCategoriaChanged(Categoria categoria )
{
     // Use the selected record however needed


     // Set your Value so it shows:
     categoriaSelezionato = categoria;
}

Upvotes: 0

Related Questions