How to

Show the list items with icons

You can render icons to the list items by mapping the iconCss field. This iconCss field create a span in the list item with mapped class name to allow styling as per your need.

In the following sample, the icon classes are mapped with iconCss field.

tagHelper
SocialMedia.cs
icons.cs
@using Sycnfusion.EJ2

<div id='iconList' class='col-lg-6' style='padding-top:15px'>
    <div class='content'>
        <h4> Icons</h4>
        <ejs-autocomplete id="icons" dataSource="@ViewBag.icondata" placeholder="Select a social media">
            <e-autocomplete-fields value="SocialMediaName" iconCss="Class"></e-autocomplete-fields>
        </ejs-autocomplete>
    </div>
</div>
<link href="../css/dropdownlist/grouping.css" rel="stylesheet" />
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace WebApplication1.Models
{
    public class SocialMedia
    {
        public string Class { get; set; }
        public string SocialMediaName { get; set; }
        public string Id { get; set; }
        public List<SocialMedia> SocialMediaList()
        {
            List<SocialMedia> media = new List<SocialMedia>();
            media.Add(new SocialMedia{ Class= "facebook", SocialMediaName= "Facebook", Id= "media1" });
            media.Add(new SocialMedia{ Class= "google-plus", SocialMediaName= "Google Plus", Id= "media2" });
            media.Add(new SocialMedia{ Class= "instagram", SocialMediaName= "Instagram", Id= "media3" });
            media.Add(new SocialMedia{ Class= "linkedin", SocialMediaName= "LinkedIn", Id= "media4" });
            media.Add(new SocialMedia{ Class= "skype", SocialMediaName= "Skype", Id= "media5" });
            media.Add(new SocialMedia{ Class= "tumblr", SocialMediaName= "Tumblr", Id= "media6" });
            media.Add(new SocialMedia{ Class= "twitter", SocialMediaName= "Twitter", Id= "media7" });
            media.Add(new SocialMedia{ Class= "vimeo", SocialMediaName= "Vimeo", Id= "media8" });
            media.Add(new SocialMedia{ Class= "whatsapp", SocialMediaName= "WhatsApp", Id= "media9" });
            media.Add(new SocialMedia { Class = "youtube", SocialMediaName= "YouTube", Id = "media10" });
            return media;
        }
    }
}
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 IActionResult icons()
        {
            ViewBag.icondata = new SocialMedia().SocialMediaList();
            return View();
        }
    }
}

The AutoComplete has built-in support to highlight the searched characters on suggested list items when enabled the highlight property.

In the below sample, to customize the matched character in suggestion list by e-highlight class.

tagHelper
Countries.cs
highlight.cs
<div id='iconList' class='col-lg-6' style='padding-top:15px'>
    <div class='content'>
        <ejs-autocomplete id="country" dataSource="@ViewBag.data" highlight="true" placeholder="Select a social media">
            <e-autocomplete-fields value="Name" iconCss="Id"></e-autocomplete-fields>
        </ejs-autocomplete>
    </div>
</div>
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 IActionResult highlight()
        {
            ViewBag.data = new Countries().CountriesList();
            return View();
        }
    }
}

Autofill supported with AutoComplete

The AutoComplete supports the autofill behavior with the help of autofill property. Whenever you change the input value, the AutoComplete will autocomplete your data by matching the typed character. Suppose, if no matches found then, AutoComplete doesn’t suggest any item.

In the below sample, showcase that how to work autofill with AutoComplete.

tagHelper
Countries.cs
autofill.cs
<div class="control-wrapper">
    <div id="default" style='padding-top:75px;margin:0 auto;width:250px;'>
        <ejs-autocomplete id="country" datasource="@ViewBag.data" placeholder="e.g. India" autofill="true" popupheight="220px">
            <e-autocomplete-fields value="name" text="code"></e-autocomplete-fields>
        </ejs-autocomplete>
    </div>
</div>
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 IActionResult autofill()
        {
            ViewBag.data = new Countries().CountriesList();
            return View();
        }
    }
}

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.

tagHelper
Countries.cs
filtering.cs
@using Newtonsoft.Json;
<div id='List' class='col-lg-6' style='padding-top:15px'>
    <div class='content'>
           <ejs-autocomplete dataSource="@ViewBag.data" showClearButton="false" filterType="Contains" id="project"  filtering="filtering"  itemTemplate="<span class='item'><span class='name'>${Name}</span>-<span class='code'>${Code}</span></span>">
                <e-autocomplete-fields value="Code" text="Name"></e-autocomplete-fields>
            </ejs-autocomplete>
    </div>
</div>
<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 IActionResult filtering()
        {
            ViewBag.data = new Countries().CountriesList();
            return View();
        }
    }
}