ASP.NET Core AutoComplete Overview

The Telerik UI AutoComplete TagHelper and HtmlHelper for ASP.NET Core are server-side wrappers for the Kendo UI AutoComplete widget.

The AutoComplete provides suggestions depending on the typed text and allows multiple value entries.

• Demo page for the AutoComplete HtmlHelper

• Demo page for the AutoComplete TagHelper

Initializing the AutoComplete

The following example demonstrates how to define the AutoComplete.

Razor

    @(Html.Kendo().AutoComplete()
        .Name("autocomplete")
        .DataTextField("ProductName")
        .Filter("contains")
        .DataSource(source =>
        {
            source.Read(read =>
            {
                read.Action("Products_Read", "AutoComplete")
                    .Data("onAdditionalData");
            })
            .ServerFiltering(true);
        })
    )

    <script type="text/javascript">
        function onAdditionalData() {
            return {
                text: $("#autocomplete").val()
            };
        }
    </script>

Razor

    <kendo-autocomplete name="products" filter="FilterType.StartsWith"></kendo-autocomplete>

C#

    public class AutoCompleteController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }

        public JsonResult Products_Read(string text)
        {
            var result = GetProducts();

            if (!string.IsNullOrEmpty(text))
            {
                result = result.Where(p => p.ProductName.Contains(text)).ToList();
            }

            return Json(result);
        }

        private static IEnumerable<ProductViewModel> GetProducts()
        {
            var result = Enumerable.Range(0, 50).Select(i => new ProductViewModel
            {
                ProductID = "" + i,
                ProductName = "Product " + i
            });

            return result;
        }
    }

Starting with the 2024 Q3 release, the HtmlHelper version of the component supports declarative initialization.

Basic Configuration

The following example demonstrates the basic configuration of the AutoComplete.

Razor

    @(Html.Kendo().AutoComplete()
          .Name("products2")
          .DataTextField("ProductName")
          .Filter("contains")
          .MinLength(3)
          .HtmlAttributes(new { style = "width:100%" })
          .DataSource(source =>
          {
              source
                  .Read(read =>
                  {
                      read.Action("GetProducts", "Home")
                      .Data("onAdditionalData");
                  })
                  .ServerFiltering(true);
          })
    )

    <script>
        function onAdditionalData() {
            return {
                text: $("#products").val() // sends the typed value from the AutoComplete to the server
            };
        }
    </script>

Razor

    <kendo-autocomplete name="products" filter="FilterType.Contains"
                        datatextfield="ProductName"
                        min-length="3" style="width: 100%;">
        <datasource type="DataSourceTagHelperType.Custom" server-filtering="true">
            <transport>
                <read url="@Url.Action("GetProducts", "Home")" data="onAdditionalData" />
            </transport>
        </datasource>
    </kendo-autocomplete>

    <script>
        function onAdditionalData() {
            return {
                text: $("#products").val() // sends the typed value from the AutoComplete to the server
            };
        }
    </script>

C#

    public JsonResult GetProducts(string text)
    {
        // filter the data based on the text value
        // return an IEnumerable collection to the view     
        return Json(products.ToList());
    }

Functionality and Features

• Data binding—The AutoComplete supports multiple data binding approaches: server, model, custom, and ajax binding.
• Grouping—You can group the data that is displayed in the AutoComplete.
• Templates—To take full control over the rendering of the AutoComplete items, popup header, and popup footer, you can use the available templates.
• Virtualization—The built-in virtualization allows you to display large datasets.
• Accessibility—The AutoComplete is accessible by screen readers and provides WAI-ARIA, Section 508, WCAG 2.2, and keyboard support.

Next Steps

• Getting Started with the AutoComplete

• Basic Usage of the AutoComplete HtmlHelper for ASP.NET Core (Demo)

• Basic Usage of the AutoComplete TagHelper for ASP.NET Core (Demo)

• AutoComplete in Razor Pages

See Also

• Using the API of the AutoComplete for ASP.NET Core (Demo)
• Knowledge Base Section