DevExtreme Autocomplete does not filter

Question

I'm using DevExtreme and have a problem with Autocomplete widget.

This is my code to create autocomplete

@(Html.DevExtreme().AutocompleteFor(m => m.CityName)
    .ID("edCity")
    .Placeholder(Html.DisplayNameFor(m => m.CityName).ToString())
    .MinSearchLength(3)
    .SearchTimeout(500)
    .ValueExpr("Name")
    .DataSource(d => d.WebApi().Controller("LNAX").LoadAction("Cities").Key("Name").LoadParams(new { id = 5 }))
)

This is the City class

public class City
{
    public int Id { get; set; }
    public string Name { get; set; }
}

When I start typing in the exit box. it show all the Cities in the drop-down list. My expectation is show a filtered list beased on what I have typed in.

What is missing in configuring the widget?

Answer 1

You need to use javascript to filter the datasource when user types in inside the edit box

@(Html.DevExtreme().AutocompleteFor(m => m.CityName)
    .ID("edCity")
    .Placeholder(Html.DisplayNameFor(m => m.CityName).ToString())
    .MinSearchLength(3)
    .SearchTimeout(500)
    .ValueExpr("Name")
    .DataSource(d => d.WebApi().Controller("LNAX").LoadAction("Cities").Key("Name").LoadParams(new { id = 5 }))
    .OnValueChanged("onCityChange") // add this line
)

and then have a javascript like this:

function onCityChange(e) {
    if (e.value.length >= 3) {
        var filter = e.value;
        var stateId = 5
        autocompleteData = new DevExpress.data.DataSource(/*a url that returns filtered data based on stateId and filter variables*/);
        autocompleteData.load();
        // set the new data source to your dxAutocomplete widget
        $("#edCity").dxAutocomplete("instance").option("dataSource", autocompleteData);
    }
}