Search results

Filter using both text and value field

The AutoComplete data can be filtered based on both text and value fields using predicate of dataManager through filtering event. The filtered data can be again updated through updateData method.

In the following example, filtering is done based on text and value fields.

razor
Countries.cs
filtering.cs
@using Newtonsoft.Json;

@Html.EJS().AutoComplete("project").DataSource((IEnumerable<object>)ViewBag.data).Fields(new Syncfusion.EJ2.DropDowns.AutoCompleteFieldSettings { Text = "Name", Value = "Code" }).ItemTemplate("<span class='item'><span class='name'>${Name}</span>-<span class='code'>${Code}</span></span>").Filtering("filtering").Render()
<script>
    function filtering(e) {
        var predicate = new ej.data.Predicate('Name', 'contains', e.text, true);
        predicate = predicate.or('Code', 'contains', e.text);
        var query = new ej.data.Query();
        query = (e.text !== '' && e.value !== '') ? query.where(predicate) : query;
        e.updateData(@Html.Raw(JsonConvert.SerializeObject(ViewBag.data)), query);
    }

</script>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace WebApplication1.Models
{
    public class Countries
    {
        public string Name { get; set; }
        public string Code { get; set; }
        public List<Countries> CountriesList()
        {
            List<Countries> country = new List<Countries>();
            country.Add(new Countries { Name = "Australia", Code = "AU" });
            country.Add(new Countries { Name = "Bermuda", Code = "BM" });
            country.Add(new Countries { Name = "Canada", Code = "CA" });
            country.Add(new Countries { Name = "Cameroon", Code = "CM" });
            country.Add(new Countries { Name = "Denmark", Code = "DK" });
            country.Add(new Countries { Name = "France", Code = "FR" });
            country.Add(new Countries { Name = "Finland", Code = "FI" });
            country.Add(new Countries { Name = "Germany", Code = "DE" });
            country.Add(new Countries { Name = "Greenland", Code = "GL" });
            country.Add(new Countries { Name = "Hong Kong", Code = "HK" });
            country.Add(new Countries { Name = "India", Code = "IN" });
            country.Add(new Countries { Name = "Italy", Code = "IT" });
            country.Add(new Countries { Name = "Japan", Code = "JP" });
            country.Add(new Countries { Name = "Mexico", Code = "MX" });
            country.Add(new Countries { Name = "Norway", Code = "NO" });
            country.Add(new Countries { Name = "Poland", Code = "PL" });
            country.Add(new Countries { Name = "Switzerland", Code = "CH" });
            country.Add(new Countries { Name = "United Kingdom", Code = "GB" });
            country.Add(new Countries { Name = "United States", Code = "US" });
            return country;
        }
    }
}
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()
        {
            ViewBag.data = new Countries().CountriesList();
            return View();
        }
    }
}