1. Home
  2. Forum
  3. Blazor
  4. Autocomplete selected text

Autocomplete selected text

Hi guys, It is possible to get the text of the selected item on autocomplete control, when a user clicks on a button?

I can get the selected value but not the text.

 <SfAutoComplete @ref="AutoCompleteObligado" TValue="string" TItem="ObligadoDto" AllowFiltering="true" @bind-Value="ObligadoId" DataSource="@Obligados" Placeholder="Selecione el Obligado">
                            <AutoCompleteFieldSettings Value="ObligadoId" Text="Name"></AutoCompleteFieldSettings>
                            <AutoCompleteEvents TItem="ObligadoDto" TValue="string"></AutoCompleteEvents>
 </SfAutoComplete>

@code {
 SfAutoComplete<string, ObligadoDto> AutoCompleteObligado;

<button type="button" @onclick=@(() => AddObligado()) class="btn btn-secondary">Add</button>

private void AddObligado()
    {
        string ObligadoId = AutoCompleteObligado.Value;
         /* string ObligadoName=  -- Here I would like to get the text */
    }
}
Thanks

5 Replies 1 reply marked as answer
PM Ponmani Murugaiyan Syncfusion Team June 8, 2021 10:13 AM UTC

Hi Luis, 

Thanks for contacting Syncfusion support. 

1. By default, AutoComplete component allows you to filter the items, so we have not provided AllowFiltering property support. Kindly remove this property from component rendering. 
2. Yes, you can get the text of the selected item on autocomplete control, when a user clicks on a button using the bind-value variable. It will affect all places where you bind the variable for the bind-value attribute. 

<SfAutoComplete TValue="string" TItem="ObligadoDto" DataSource="@Obligados" @bind-Value="ObligadoId" Placeholder="Selecione el Obligado"> 
    <AutoCompleteFieldSettings Value="Name"></AutoCompleteFieldSettings> 
</SfAutoComplete> 
<button type="button" @onclick=@(() => AddObligado()) class="btn btn-secondary">Add</button> 
<p>The selected item is : @SelectedItem</p> 
 
 
@code { 
    public string ObligadoId; 
    public string SelectedItem; 
    ... 
    private void AddObligado() 
    { 
        SelectedItem = ObligadoId; 
    } 
} 

 


Regards, 
Ponmani M 


LR Luis Roberto June 8, 2021 04:14 PM UTC

Hi Ponmani M, thank you very much for your reply I really appreciate it, but I think I missed information about what I want to do.

I can get the value but the problem is I cant get the text, in my case value and text are different, I am binding the SfAutoComplet to a class with a name and a Id, when the user writes the text the autocomplet search the name but binds to the id, so when the user clicks on the button I want to get both the id and the text.

I modify the expample you kindly sent me to show you what am I trying to do.

thank you very much

Attachment: AutoComplete_Select_907c501.zip

PM Ponmani Murugaiyan Syncfusion Team June 9, 2021 07:31 AM UTC

Hi Luis, 

Thanks for the update. 

Query: So when the user clicks on the button I want to get both the id and the text. 
 
You can get the both Name and Code using the OnValueSelect event argument (args.ItemData) as like below code snippet. So, when user click on the button, you can get the id and text as per your requirement. 

<SfAutoComplete @ref="AutoCompleteObligado" TValue="string" TItem="ObligadoDto" DataSource="@Obligados" @bind-Value="ObligadoId" Placeholder="Selecione el Obligado"> 
    <AutoCompleteFieldSettings Value="Code" Text="Name"></AutoCompleteFieldSettings> 
    <AutoCompleteEvents TItem="ObligadoDto" TValue="string" OnValueSelect="valueSelect" Filtering="@OnFilteringObligados"></AutoCompleteEvents> 
</SfAutoComplete> 
<button type="button" @onclick=@(() => AddObligado()) class="btn btn-secondary">Add</button> 
<p>The selected item Name is : @text</p> 
<p>The selected item Code is : @id</p> 
 
@code { 
    private void AddObligado() 
    { 
      //Here I would like to get both the name and the Code 
      text = SelectedText; 
      id = SelectedId; 
    } 
    public void valueSelect(SelectEventArgs<ObligadoDto> args) 
    { 
      SelectedText = args.ItemData.Name; 
      SelectedId = args.ItemData.Code; 
   } 
} 

 


Regards, 
Ponmani M 


Marked as answer
LR Luis Roberto June 9, 2021 04:08 PM UTC

Thank you very much, Ponmani M, the example worked great.

Thank you for all your help.

Take care

PM Ponmani Murugaiyan Syncfusion Team June 10, 2021 04:45 AM UTC

Hi Luis, 

Most welcome. We are glad to know that the provided example helps you in achieving your requirement. 

Regards, 
Ponmani M 


Loader.
Up arrow icon