DevExtreme 自动完成不过滤

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

这是城市班

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 支持网站上发现了几篇帖子，说您必须使用查找小部件。

关键是自动完成小部件期望您的数据源查找并使用

$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

并忽略其他参数。

Answer 3

我采取了不同的方法来解决这个问题。

i.AddSimpleFor(m => m.ams_Vendor).Editor(e => e.Autocomplete().DataSource(ds => ds.Mvc().Controller("AutoComplete").LoadAction("Vendor").LoadParams(new { jadeId = 52 })).ShowClearButton(true));

我在 LoadParams 中添加了我想要的自动完成功能的附加过滤。这会在查询字符串中传递jadeId。它不会将其添加到过滤器中。

在我的自动完成控制器中，我在方法中添加了jadeId变量。

[HttpGet]
        public ActionResult Vendor(DataSourceLoadOptions loadOptions, [FromQuery(Name = "jadeId")] int jadeId)
        {
            return Content(JsonConvert.SerializeObject(DataSourceLoader.Load(GetDistinctValues("AMS_Vendor", jadeId), loadOptions)), "application/json");
    }

然后在我的 GetDistinctValues 方法（使用 DevExpress 的 XPO）中添加了 jadefilter 标准。

private List<string> GetDistinctValues(string fieldname, int jadeId)
        {
            // get the distinct values from 
            List<string> model = new List<string>();

            XPView view = new XPView(_uow, typeof(JadeModels));
            view.AddProperty(fieldname, fieldname, true, true, SortDirection.Ascending);
            CriteriaOperator criteria = new NotOperator(new NullOperator(fieldname));
            CriteriaOperator jadefilter = new BinaryOperator("JadeId", jadeId);
            view.Criteria = new GroupOperator(GroupOperatorType.And, criteria, jadefilter);

            foreach (ViewRecord item in view)
            {
                model.Add(item[0].ToString());
            }
            return model;
        }

对我来说，这个解决方案应该可以完美工作。如果没有 jadeId 过滤器，我永远不需要获取自动完成值。你的旅费可能会改变。对我来说，不添加更多 javascript 是一件好事。