Edit this page

AutoComplete Tag Helper Overview

The AutoComplete tag helper helps you configure the Kendo UI AutoComplete widget in ASP.NET Core applications.

Basic Usage

The following example demonstrates how to define the AutoComplete by using the AutoComplete tag helper.

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

Configuration

The AutoComplete tag helper configuration options are passed as attributes of the tag.

Example

    @(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()
            };
        }
    </script>

    <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()
            };
        }
    </script>

See Also