@using Telerik.DataSource
@using Telerik.DataSource.Extensions

<TelerikComboBox OnRead="@OnComboBoxRead"
                 TItem="@ListItem"
                 TValue="@int"
                 @bind-Value="@SelectedValue"
                 TextField="@nameof(ListItem.Text)"
                 ValueField="@nameof(ListItem.Id)"
                 Filterable="true"
                 FilterOperator="@StringFilterOperator.Contains"
                 Width="300px">
    <ItemTemplate>
        @HighlightResult(context.Text)
    </ItemTemplate>
</TelerikComboBox>

<style>
    .k-list-item:has(u) {
        gap: 0;
    }
</style>

@code {
    private List<ListItem> ListItems { get; set; } = new();

    private int SelectedValue { get; set; } = 3;

    private string ComboBoxFilterValue { get; set; } = string.Empty;

    private async Task OnComboBoxRead(ComboBoxReadEventArgs args)
    {
        ComboBoxFilterValue = args.Request.Filters.Cast<FilterDescriptor>().FirstOrDefault()?.Value.ToString() ?? string.Empty;

        DataSourceResult result = await ListItems.ToDataSourceResultAsync(args.Request);

        args.Data = result.Data;
        args.Total = result.Total;
    }

    public MarkupString HighlightResult(string text)
    {
        var result = string.IsNullOrWhiteSpace(ComboBoxFilterValue)
            ? text
            : text.Replace(ComboBoxFilterValue, "<u>" + ComboBoxFilterValue + "</u>", StringComparison.OrdinalIgnoreCase);

        return new MarkupString(result);
    }

    protected override void OnInitialized()
    {
        ListItems = new List<ListItem>() {
            new ListItem(1, "Basketball"),
            new ListItem(2, "Golf"),
            new ListItem(3, "Baseball"),
            new ListItem(4, "Table Tennis"),
            new ListItem(5, "Volleyball"),
            new ListItem(6, "Football"),
            new ListItem(7, "Boxing"),
            new ListItem(8, "Badminton"),
            new ListItem(9, "Cycling"),
            new ListItem(10, "Gymnastics"),
            new ListItem(11, "Swimming"),
            new ListItem(12, "Wrestling"),
            new ListItem(13, "Snooker"),
            new ListItem(14, "Skiing"),
            new ListItem(15, "Handball"),
            };

        base.OnInitialized();
    }

    public class ListItem
    {
        public int Id { get; set; }
        public string Text { get; set; } = string.Empty;

        public ListItem(int id, string text)
        {
            Id = id;
            Text = text;
        }
    }
}

CachedSitesList = result.Items;

args.Data = result.Items;
args.Total = (int)result.TotalCount;

<TelerikComboBox @bind-Value=@SelectedValue
                 Data="@ComboBoxData"
                 ValueField="ProductId"
                 TextField="ProductName">
    <ItemTemplate>
        @{
            var currentItem = context as Product;

            <div onclick="@(() => OnClickHandler(currentItem))" style="width:100%">
                @currentItem.ProductName
            </div>
        }
    </ItemTemplate>
</TelerikComboBox>

@code {
    private void OnClickHandler(Product item)
    {
        //the application logic here
    }

    public IEnumerable<Product> ComboBoxData { get; set; }
    public int SelectedValue { get; set; } = 2;

    protected override void OnInitialized()
    {
        List<Product> products = new List<Product>();
        for (int i = 1; i < 10; i++)
        {
            products.Add(new Product()
                {
                    ProductId = i,
                    ProductName = $"Product {i}",
                    UnitPrice = (decimal)(i * 3.14)
                });
        }

        ComboBoxData = products;
        base.OnInitialized();
    }

    public class Product
    {
        public int ProductId { get; set; }
        public string ProductName { get; set; }
        public decimal UnitPrice { get; set; }
    }
}

    <script>
        function selectAllText(parentElem) {
            let input = parentElem.querySelector(".k-input");
            if (input && input.focus) {
                input.select();
            }
        }
    </script>

@inject IJSRuntime _js

@SelectedValue
<br />

<span @onfocusin="@SelectAllText" @ref="@spanRef">
    <TelerikComboBox Data="@Data"
                     Filterable="true" FilterOperator="@StringFilterOperator.Contains"
                     Placeholder="Find product by typing part of its name"
                     @bind-Value="@SelectedValue" 
                     TextField="ProductName" ValueField="ProductName" AllowCustom="true">
    </TelerikComboBox>
</span>

@code {
    ElementReference spanRef { get; set; }
    async Task SelectAllText()
    {
        await _js.InvokeVoidAsync("selectAllText", spanRef);
    }

    public List<Product> Data { get; set; }
    public string SelectedValue { get; set; }

    protected override void OnInitialized()
    {
        List<Product> products = new List<Product>();
        for (int i = 0; i < 20; i++)
        {
            products.Add(new Product()
            {
                ProductId = i,
                ProductName = $"Product {i}"
            });
        }

        Data = products;
        base.OnInitialized();
    }

    public class Product
    {
        public int ProductId { get; set; }
        public string ProductName { get; set; }
    }
}