Question

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

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

Kendo还提供Multiselect，允许用户从列表中选择多个项目。

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

Answer 1

最好的方法是使用Multiselect框，如果在数据库中找不到搜索项，请将其添加到结果集中。您需要传递一个单独的搜索字段＆＃34;搜索＆＃34; （或任何你想称之为的）行动。

在你的.shtml中初始化Multiselect

$('#recipient').kendoMultiSelect({
        placeholder: "Type name or email address...",
        dataTextField: "Name",
        dataValueField: "Email",
        template: "#: Name # &lt;#: Email #&gt;",
        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);
    }

新添加的项目将保留在MultiSelect框中，并且将被视为与其余项目完全相同（即通过单击小十字等删除）。

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

希望这有帮助！

如何使用服务器筛选创建具有多个所选项目的Kendo ComboBox

1 个答案: