如何使用服务器筛选创建具有多个选定项目的剑道组合框

Question

我正在创建一个电子邮件客户端，我希望名称/地址查找的工作方式与Gmail相同。

Kendo提供了一个ComboBox，允许用户编写自由格式的文本，或从过滤列表中选择一个项目。

剑道还提供多选功能，允许用户从列表中选择多个项目。

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

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

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

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

希望这有帮助！