Filter using both text and value field

19 Dec 20221 minute to read

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.

CSHTML

@using Newtonsoft.Json;
@using AutoCompleteCustomSample.Models;
@{
    var data = new Countries().CountriesList();
}
<div id='List' class='col-lg-6' style='padding-top:15px'>
    <div class='content'>
        <ejs-autocomplete dataSource="@data" showClearButton="false" id="project" filtering="filtering" itemTemplate="<span class='item'><span class='name'>${Name}</span>-<span class='code'>${Code}</span></span>">
            <e-autocomplete-fields  Text ="Name" Value ="Code"></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>

NOTE

View Sample in GitHub.