How to implement multi select on blazor when search for server name text?

See more:

Blazor

BlazorForms

I work on blazor server side . I face issue I can't apply select2 multi select based on web API ?

I need multi select as server1,server2 text display when search .

when select first time then server1 and second time select server2 then server1,server2

what I try as below :

1 - create model servers

public class ServerNames
    {
        [Key]
        public int ServerID { get; set; }
        [Required(ErrorMessage = "Server name is required")]
        public string Server_Name{ get; set; }
    }

2 - Implement service

List<ServerNames> GetSimilarServers(string searchText);

    
public List<ServerNames> GetSimilarServers(string searchText)
        {
            var serverNames = _context.ServerNames.Where(p => p.Server_Name.Contains(searchText)).ToList();

            return serverNames;
        }

3 - call service on controller web api

[HttpGet]
            [Route("/api/ServerNames/GetSimilarServers/{searchText}")]
            public JsonResult GetSimilarServers(string searchText)
            {
                var serversName =  _IserverNamesService.GetSimilarServers(searchText);
    
                return new JsonResult(serversName);
            }

4 - on server.razor component I call web API make search filter

@code 
{
private List<ServerNames> SimilarServers{ get; set; }
public  async Task<ServerNames> DisplayListServer(string SearchText)
    {
       
        var serversLists = await GetSimilarServers(SearchText);

        SimilarServers = serversLists.ToList();
       
    }
public async Task<IEnumerable<ServerNames>> GetSimilarServers(string searchText)
    {
        HttpClient httpClient = new HttpClient();
        var response = await httpClient.GetAsync(config["API_URL"] + "ServerNames/GetSimilarServers/" + searchText + "");
        if (response.IsSuccessStatusCode)
        {
            var result = await JsonSerializer.DeserializeAsync<ServerNames[]>(await response.Content.ReadAsStreamAsync(), new JsonSerializerOptions() { PropertyNameCaseInsensitive = true });
            return result;
        }
        else
        {
            return null; //handle the response that was not successful here.
        }
    }
}

SO How to make select2 OR any autocomplete allow to me multi select on blazor based on web API above ?

What I have tried:

expected result

<select2 Multiselect="true"></select2>
but I don't know How to implement it



Number of servers exist on database I will select from it reach as maximum to 250 or 300 at maximum and and when I select I will select 2 or 3 server when it separated by comma