Question

我正在使用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 }))
)

这是City类

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

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

配置小部件时缺少什么？

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

Answer 2

尽管我在DevExtreme支持站点上发现了几条帖子，说您必须改用Lookup小部件，但Autocomplete小部件确实实现了此行为。

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

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

这是“自定义项目模板和数据源使用情况”下的“状态”字段-即使数据集很琐碎（美国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参数来返回仅两个状态的预期列表。

您还可以添加自己的参数-之所以如此，是因为我无法处理参数名称中的$。只需在数据源的params事件中使用beforeSend：

    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并忽略其他参数。

DevExtreme Autocomplete不会过滤

2 个答案: