如何使用服务器过滤创建包含多个选定项目的 Kendo ComboBox

Question

我正在创建一个电子邮件客户端，我希望 name/address 查找的工作方式与它在 Gmail 中的工作方式相同。

Kendo 提供一个组合框，允许用户编写自由格式的文本，或 select 过滤列表中的项目。

Kendo 还提供了一个 Multiselect 允许用户从列表中 select 多项。

我需要的是两者的结合...

Answer 1

最好的方法是使用多选框，如果在数据库中找不到搜索项，则将其添加到结果集中。您需要将一个单独的搜索字段 "search"（或您想要的任何名称）传递给该操作。

初始化 .shtml 中的多选

$('#recipient').kendoMultiSelect({
        placeholder: "Type name or email address...",
        dataTextField: "Name",
        dataValueField: "Email",
        template: "#: Name # <#: Email #>",
        autoBind: false,
        filter: "contains",
        dataSource: {
            type: "json",
            serverFiltering: true,
            transport: {
                read: {
                    url: "/Email/Contacts",
                    dataType: "json",
                    data: function () {
                        return { // THIS IS YOUR SEARCH FIELD
                            search: $('#recipient').data("kendoMultiSelect").input.val()
                        }
                    }
                }
            },
            schema: {
                type: "json",
                data: "Data",
                model: {
                    fields: {
                        Name: { field: "Name", type: "string" },
                        Email: { field: "Email", type: "string" }
                    }
                }
            }
        }
    });

您的控制器将有此代码：

    public ActionResult Contacts(string search, [DataSourceRequest]DataSourceRequest request)
    {            
        if(search == null || search.Length == 0) // Only query once user types stuff in to avoid unnecessary db load
        {
            return Json((new List<EmailNamePair>()).ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
        }

        var PeopleList = from moc in db.MeansOfContacts
                         orderby moc.Firstname, moc.LastName, moc.Email
                         select new EmailNamePair()
                         {
                             Email = moc.Email,
                             Name = moc.Firstname + " " + moc.LastName
                         };

        // Check that the searched value exists
        var ds = PeopleList.ToDataSourceResult(request);
        if (ds.Total != 0)
        {
            return Json(ds, JsonRequestBehavior.AllowGet);
        }

        // Custom value that doesn't exist
        var result = PeopleList.ToList();
        result.Add(new EmailNamePair() {
            Email = search,
            Name = search
        });
        return Json(result.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
    }

新添加的项目将保留在“多选”框中，并将与其余项目完全相同地处理（即通过单击小十字等删除）。

您还可以添加额外的验证，以在将电子邮件地址添加到数据源之前查看其是否有效。但是你明白了要点。

希望对您有所帮助！