Filtering in ASP.NET MVC AutoComplete

27 Aug 20267 minutes to read

The AutoComplete has built-in support to filter data items. The filter operation starts as soon as you start typing characters in the control.

Change the filter type

Determines the filter type the control uses when performing a search. The available filterType and its supported data types are as follows.

Filter Type Description Supported Types
StartsWith Checks whether a value begins with the specified value. String
EndsWith Checks whether a value ends with the specified value. String
Contains Checks whether a value contains the specified value. String

The following example shows data filtering done with the StartsWith type.

@Html.EJS().AutoComplete("customers").Placeholder("Select a customer").PopupHeight("200px").FilterType(Syncfusion.EJ2.DropDowns.FilterType.StartsWith).DataSource(dataManger =>
            dataManger.Url("https://services.odata.org/V4/Northwind/Northwind.svc/").Adaptor("ODataV4Adaptor").CrossDomain(true)).Fields(new Syncfusion.EJ2.DropDowns.AutoCompleteFieldSettings 
            {
                Value = "ContactName",
            }).Query("new ej.data.Query().from('Customers').select(['ContactName'])").Render()
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using WebApplication1.Models;

namespace WebApplication1.Controllers
{
    public class AutoCompleteController : Controller
    {
        public ActionResult filtering()
        {
            return View();
        }       
    }
}

Filter item count

You can specify the filter suggestion item count through the suggestionCount property of the AutoComplete.

The following example restricts the suggestion list item count to 5.

@Html.EJS().AutoComplete("customers").Placeholder("Select a customer").PopupHeight("200px").SuggestionCount(3).DataSource(dataManger =>
            dataManger.Url("https://services.odata.org/V4/Northwind/Northwind.svc/").Adaptor("ODataV4Adaptor").CrossDomain(true)).Fields(new Syncfusion.EJ2.DropDowns.AutoCompleteFieldSettings
            {
                Value = "ContactName",
            }).Query("new ej.data.Query().from('Customers').select(['ContactName'])").Render()
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using WebApplication1.Models;

namespace WebApplication1.Controllers
{
    public class AutoCompleteController : Controller
    {
        public ActionResult filtering()
        {
            return View();
        }       
    }
}

Limit the minimum filter character

You can set the limit for the character count to filter the data on the AutoComplete. This can be done by setting the minLength property of the AutoComplete.

In the following example, the remote request does not fetch the search data until the search key contains at least three characters.

@Html.EJS().AutoComplete("customers").Placeholder("Select a customer").PopupHeight("200px").MinLength(3).DataSource(dataManger =>
            dataManger.Url("https://services.odata.org/V4/Northwind/Northwind.svc/").Adaptor("ODataV4Adaptor").CrossDomain(true)).Fields(new Syncfusion.EJ2.DropDowns.AutoCompleteFieldSettings 
            {
                Value = "ContactName",
            }).Query("new ej.data.Query().from('Customers').select(['ContactName'])").Render()
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using WebApplication1.Models;

namespace WebApplication1.Controllers
{
    public class AutoCompleteController : Controller
    {
        public ActionResult filtering()
        {
            return View();
        }       
    }
}

Case sensitive filtering

Data items can be filtered either with or without case sensitivity using the DataManager. This can be done by setting the ignoreCase property of AutoComplete.

@Html.EJS().AutoComplete("customers").Placeholder("Select a customer").PopupHeight("200px").FilterType(Syncfusion.EJ2.DropDowns.FilterType.StartsWith).IgnoreCase(false).DataSource(dataManger =>
            dataManger.Url("https://services.odata.org/V4/Northwind/Northwind.svc/").Adaptor("ODataV4Adaptor").CrossDomain(true)).Fields(new Syncfusion.EJ2.DropDowns.AutoCompleteFieldSettings
            {
                Value = "ContactName",
            }).Query("new ej.data.Query().from('Customers').select(['ContactName'])").Render()
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using WebApplication1.Models;

namespace WebApplication1.Controllers
{
    public class AutoCompleteController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }       
    }
}

Diacritics filtering

The AutoComplete supports diacritics filtering, which ignores diacritics and makes it easier to filter the results in international character lists when the ignoreAccent is enabled.

@Html.EJS().AutoComplete("Diacritics").DataSource((string[])ViewBag.data).Placeholder("e.g: aero").IgnoreAccent(true).Render()

Debounce delay

You can use the debounceDelay property for filtering, enabling you to set a delay in milliseconds. This functionality helps reduce the frequency of filtering as you type, enhancing performance and responsiveness for a smoother user experience.By default, a DebounceDelay of 300ms is set. If you wish to disable this feature entirely, you can set it to 0ms.

@Html.EJS().AutoComplete("games").Placeholder("Select a game").PopupHeight("200px").DataSource((IEnumerable<object>)ViewBag.data).DebounceDelay(300).Render()
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using WebApplication1.Models;

namespace WebApplication1.Controllers
{
    public class AutoCompleteController : Controller
    {
        public ActionResult arrayofstring()
        {
            ViewBag.data = new string[] { "Badminton", "Basketball", "Cricket", "Football", "Golf", "Gymnastics", "Hockey", "Tennis" };
            return View();
        }
    }
}

View Sample in GitHub.

See also