DevExtreme 自动完成不过滤答案

【问题标题】：DevExtreme Autocomplete does not filterDevExtreme 自动完成不过滤
【发布时间】：2017-12-11 02:02:29
【问题描述】：

我正在使用 DevExtreme，但遇到自动完成小部件的问题。

这是我创建自动完成的代码

@(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 }))
)

这是城市类

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

当我开始在退出框中输入内容时。它显示下拉列表中的所有城市。我的期望是根据我输入的内容显示一个过滤列表。

配置小部件时缺少什么？

【问题讨论】：

标签： autocomplete devextreme devexpress-mvc

【解决方案1】：

当用户在编辑框内输入时，您需要使用 javascript 来过滤数据源

@(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
)

然后有一个像这样的javascript：

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);
    }
}

【讨论】：

谢谢！您的回答帮助我编写了代码。
这将忽略searchTimeout 设置——dataSource 在输入每个字母之后（第三个字母之后）重新加载，即使没有暂停。

【解决方案2】：

自动完成小部件确实实现了这种行为，尽管我在 DevExtreme 支持网站上发现了一些帖子说您必须改用查找小部件。

关键是自动完成小部件希望您的数据源查找并使用$filter 和其他参数来返回正确的过滤列表。您也可以添加自己的参数；见下文。

在 DevExpress 网站上有一个演示： https://js.devexpress.com/Demos/WidgetsGallery/Demo/Autocomplete/Overview/jQuery/Light/

它是“自定义项目模板和数据源使用”下的 State 字段——即使数据集很简单（美国 50 个州的列表），它实际上是在查询远程数据源并返回过滤列表。这是演示代码（JQuery，其他风格请参见演示链接）：

$("#state").dxAutocomplete({
    dataSource: new DevExpress.data.ODataStore({
        url: "https://js.devexpress.com/Demos/DevAV/odata/States?$select=Sate_ID,State_Long,State_Short",
        key: "Sate_ID",
        keyType: "Int32"
    }),
    placeholder: "Type state name...",
    valueExpr: "State_Long",
    itemTemplate: function(data) {
        return $("<div>" + data.State_Long + 
            " (" + data.State_Short + ")" + "</div>");
    },
    onValueChanged: function(data) {
        state = data.value;
        updateEmployeeInfo();
    }
});

在状态字段中输入“ala”，并注意发生了此网络请求（我使用 Chrome 开发人员工具的“网络”选项卡查看了该请求）。

https://js.devexpress.com/Demos/DevAV/odata/States?$select=Sate_ID,State_Long,State_Short&$top=10&$filter=(substringof(%27ala%27%2Ctolower(State_Long)))

通过观察 $top 和 $filter 参数，这将返回仅包含两个状态的预期列表。

您还可以添加自己的参数——我这样做是因为我无法处理参数名称中的$。只需在数据源的beforeSend 事件中使用params：

    dataSource: new DevExpress.data.ODataStore({
        url: "https://js.devexpress.com/Demos/DevAV/odata/States?$select=Sate_ID,State_Long,State_Short",
        key: "Sate_ID",
        keyType: "Int32"            
        beforeSend: function (e) {
            console.log(e.params) // Show original params
            e.params.SearchTerm = $("#state").val()
            e.params.Limit = 10
            console.log(e.params) // There's my new params
        }
    })

现在数据源可以使用参数SearchTerm 和Limit 并忽略其他参数。

【讨论】：