Documentation Update - Autocomplete with preselected values

[oaldrian]

Is your feature request related to a problem? Please describe.

Documentation update - Autocomplete

Describe the solution you'd like Add an example of how to use Autocomplete component with a text / value that is set in oninitasync, different to the one with multiselect.

Additional context

I just spent like an hour figuring out how to set a predefined value to the Autocomplete component.

• When setting selectedValue and selectedText, selectedText got reset somehow, and was empty all the time.
• when setting only selectedValue (as suggested by the example with multiplevalue selection) the selected text was also empty all the time (How exactly does the example work?)
• I ended up setting only the selecteText, and leaving the selectedValue null (but on the source object the parameter where the selected value comes from is set) and when saving the object that the values belong to, I check for selectedValue != null, and if yes the predefined value stays in the object

• I know I can set TValue to Guid (tried that too with all non working combinations above), but I got it running now, so I don't want to mess with it currently

              <FieldBody ColumnSize="ColumnSize.Is7">
              <Autocomplete Context="autocompleteContext"
                            TItem="Funktionsteilstelle"
                            TValue="string"
                            Data="@subdepartments"
                            TextField="@(( item ) => item.FullID + " " + item.Name)"
                            ValueField="@(( item ) => item.Id.ToString())"
                            Placeholder="Search..."
                            Filter="AutocompleteFilter.Contains"
                            FreeTyping
                            @bind-SelectedValue="@selectedSubdepartment"
                            @bind-SelectedText="@selectedSubdepartmentText">
                  <NotFoundContent> @autocompleteContext Kann nicht gefunden werden</NotFoundContent>
              </Autocomplete>
          </FieldBody>
  
          protected override async Task OnInitializedAsync()
          {
              hubConnection = new HubConnectionBuilder()
                  .WithUrl(NavigationManager.ToAbsoluteUri("/datahub"))
                  .Build();
  
              hubConnection.On<Room>("ReceiveRoom", room =>
              {
                  this.room = room;
  
                  if (room.Funktionsteilstelle != null)
                {
                    selectedSubdepartmentText = room.Funktionsteilstelle.FullID + " " + room.Funktionsteilstelle.Name;
                }
                StateHasChanged();
            });
  
            private async Task Save()
        {
            if (!string.IsNullOrWhiteSpace(selectedSubdepartment))
            {
                room.Funktionsteilstelle = subdepartments.Single(x => x.Id.Equals(Guid.Parse(selectedSubdepartment)));
            }
  
            await hubConnection.SendAsync("SaveRoom", room);

[stsrki]

@David-Moreira, you're the maker of this feature. Do you think it looks good?

[David-Moreira]

Hello, Can you help understand the difference in this example in comparison to our examples that might not have helped you enough? I dont' get the difference, can you explain please?

The https://blazorise.com/docs/extensions/autocomplete

• does not start with a bound value, but does provide the binding to the properties, binding values should work normally as in other blazor components by setting the property value, with a possible call to StateHasChanged so blazor re-calculates stuff.
• the multiple example shows an example of bound values

[oaldrian]

I will provide an implementation example 👍

[oaldrian]

Oh my, oh my

Epic facepalm on my side.

I had loaded the data for the Autocomplete after setting the text and the value. Ofc the value could not be set, but only the text, and trying to set the value, reset the text.

Sorry for bothering you!

[David-Moreira]

Haha happens to the best of us. Just let us know if you need anything Blazorise related. Happy coding. :)