@page "/fetchdata"

@using WebApplication1.Data
@inject ArtistSearchService artistSearch


<h1>Autocomplete Artist Search</h1>

<SfAutoComplete @ref="autoObj" TValue="string" TItem="ArtistSearch" Placeholder="Select a customer" MinLength=2 Query="@Query" PopupWidth="200%" Width="50%" Highlight="true">
    <SfDataManager Url="https://localhost:44305/api/Artist" Adaptor="Syncfusion.Blazor.Adaptors.WebApiAdaptor" CrossDomain=true></SfDataManager>
    <AutoCompleteEvents Filtering="OnFiltering" TItem="ArtistSearch" TValue="string"></AutoCompleteEvents>
    <AutoCompleteTemplates TItem="ArtistSearch">
        <HeaderTemplate>
            <div class="h5 rounded-circle">a b c d e f g h i ...</div>
        </HeaderTemplate>
        <ItemTemplate>
            <span>
                <span class="h5">@((context as ArtistSearch).ArtistDisplayName )</span>&nbsp;&nbsp;&nbsp;
                <span class="text-secondary">@((context as ArtistSearch).KnownFor)</span>
            </span>
        </ItemTemplate>
    </AutoCompleteTemplates>
    <AutoCompleteFieldSettings Value="ArtistDisplayName"></AutoCompleteFieldSettings>
</SfAutoComplete>

<br />
<br />



@code {

    public ArtistSearch[] artists;
    SfAutoComplete<string, ArtistSearch> autoObj;

    public Query Query = new Query().Select(new List<string> { "ArtistDisplayName" }).Take(6).RequiresCount();

    protected override void OnInitialized(){}

    public async Task OnFiltering(FilteringEventArgs args)
    {
        //args.PreventDefaultAction = true;
        Query = new Query().AddParams("searchText", args.Text).AddParams("top", "8");
        await this.autoObj.FilterAsync(artists, Query);
        //this.autoObj.DataManager.Url = "https://localhost:44305/api/Artist?searchText=you";

    }


}