Not able to auto complete using Text in AutoCompleteFor

[Joel Walter]

I am not able to make it work, It works well for dropdownlistfor, not sure what I am doing wrong.

I have attached a screen-print and my code snippet as well.

 public List<IdValue> CountryList { get; set; }

 public class IdValue

    {

        public int Id { get; set; }

        public string Value { get; set; }

    }

@Html.EJS().AutoCompleteFor(m => m.ProfileAddressSection.country_id).DataSource(Model.ProfileAddressSection.CountryList).FilterType(filterType:Syncfusion.EJ2.DropDowns.FilterType.Contains).Placeholder("Choose a Country").Fields(new Syncfusion.EJ2.DropDowns.AutoCompleteFieldSettings { Text = "Value", Value = "Id" }).Value(Model.ProfileAddressSection.country_id).Width("100%").Render()

Packages:

  <package id="Syncfusion.EJ2.JavaScript" version="20.2.0.50" targetFramework="net45" />

  <package id="Syncfusion.EJ2.MVC5" version="20.2.0.50" targetFramework="net45" />

  <package id="Syncfusion.Licensing" version="20.2.0.50" targetFramework="net45" />

[Joel Walter]

My requirement is for a dropdownlist with filter option or any, to choose a country by typing. 

[UdhayaKumar Duraisamy]

The AutoComplete component filters the values based on the Value field alone and does not support the Text field. If you want to filter the values based on both the text and value field, you can use custom filtering with the AutoComplete component. Please refer to the code snippet and sample shared below for further reference.

@model WebApplication.Controllers.DataModel

 

<div style="margin:150px auto;width:300px">

    @using (Html.BeginForm())

    {

        @Html.EJS().AutoCompleteFor(model => model.EnquiringAboutSelect).Filtering("filtering").Placeholder("Select a Country").FilterType(filterType: Syncfusion.EJ2.DropDowns.FilterType.Contains).DataSource(Model?.EnquiringAboutSelectListItems).Fields(new Syncfusion.EJ2.DropDowns.AutoCompleteFieldSettings { Value = "Text" }).Width("100%").Render()

        <div>

            @Html.ValidationMessageFor(model => model.EnquiringAboutSelect)

        </div>

 

        <div id="submitbutton">

            @Html.EJS().Button("btn").Content("Post").Render()

        </div>

    }

</div>

 

<script type="text/javascript">

    function filtering(e) {

        e.preventDefaultAction = true;

        var autoObj = document.querySelector('#EnquiringAboutSelect').ej2_instances[0];

        var predicate = new ej.data.Predicate('Text','contains',e.text,(ignoreCase = true));

        predicate = predicate.or('Value', 'contains', e.text, (ignoreCase = true));

        var query = new ej.data.Query();

        query = e.text != '' ? query.where(predicate) : query;

        e.updateData(autoObj.dataSource, query);

    }

</script>

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/WebApplication204726358

[Joel Walter]

Is there a way I can set the value  i.e. Value(Model.ProfileAddressSection.country_id) from the model as text on Load? instead of 105  

eg:  For new record  Model.ProfileAddressSection.country_id is 0 and if I choose a country for instance Brisbane it's 105

[UdhayaKumar Duraisamy]

It seems that you are trying to set the text using the value field in the component and want to retrieve the value when selecting the text. The AutoComplete component operates based on the value field alone. For your requirements, we recommend using the ComboBox component. With the ComboBox, you can set the text using the value field and also retrieve the selected text value in the model. Please refer to the following documentation and online demo for more information about the ComboBox component:

Documentation: https://ej2.syncfusion.com/aspnetmvc/documentation/combo-box/getting-started

Online Demo: https://ej2aspnetmvc.azurewebsites.net/aspnetmvc/combobox/comboboxfor#/material3

@model WebApplication.Controllers.DataModel

 

<div style="margin:150px auto;width:300px">

    @using (Html.BeginForm())

    {

        @Html.EJS().ComboBoxFor(model => model.EnquiringAboutSelect).Filtering("filtering").Placeholder("Select a Country").FilterType(filterType: Syncfusion.EJ2.DropDowns.FilterType.Contains).DataSource(Model?.EnquiringAboutSelectListItems).Fields(new Syncfusion.EJ2.DropDowns.ComboBoxFieldSettings { Text = "Text", Value = "Value" }).Width("100%").Render()

        <div>

            @Html.ValidationMessageFor(model => model.EnquiringAboutSelect)

        </div>

 

        <div id="submitbutton">

            @Html.EJS().Button("btn").Content("Post").Render()

        </div>

    }

</div>

 

<script type="text/javascript">

    function filtering(e) {

        e.preventDefaultAction = true;

        var autoObj = document.querySelector('#EnquiringAboutSelect').ej2_instances[0];

        var predicate = new ej.data.Predicate('Text','contains',e.text,(ignoreCase = true));

        predicate = predicate.or('Value', 'contains', e.text, (ignoreCase = true));

        var query = new ej.data.Query();

        query = e.text != '' ? query.where(predicate) : query;

        e.updateData(autoObj.dataSource, query);

    }

</script>

namespace WebApplication.Controllers

{

    public class DataModel

    {

        [Required(ErrorMessage = "The value is Required")]

        public int? EnquiringAboutSelect { get; set; }

        public List<ListItems> EnquiringAboutSelectListItems { get; set; }

    }

    public class HomeController : Controller

    {

        public ActionResult Index()

        {

            DataModel model = new DataModel();

            model.EnquiringAboutSelectListItems = new ListItems().getListItems();

            model.EnquiringAboutSelect = 105;

            return View(model);

        }

 

        [HttpPost]

        public ActionResult Index(DataModel model)

        {

            model.EnquiringAboutSelectListItems = new ListItems().getListItems();

            model.EnquiringAboutSelect = model.EnquiringAboutSelect;

            return View(model);

        }

 

    public class ListItems

    {

        public string Text { get; set; }

        public int Value { get; set; }

        public List<ListItems> getListItems()

        {

            List<ListItems> items = new List<ListItems>();

            items.Add(new ListItems() { Text = "Aberdeen", Value = 103 });

            items.Add(new ListItems() { Text = "Alexandria", Value = 102 });

            items.Add(new ListItems() { Text = "Albany", Value = 101 });

            items.Add(new ListItems() { Text = "Beacon ", Value = 104 });

            items.Add(new ListItems() { Text = "Brisbane ", Value = 105 });

            return items;

        }

    }

}