0

私はメール クライアントを作成しています。たとえば、Gmail と同じように名前/アドレスの検索を行いたいと考えています。

Kendo は、ユーザーが自由形式のテキストを書き込んだり、フィルター処理されたリストからアイテムを選択したりできる ComboBox を提供します。

剣道は、ユーザーがリストから複数のアイテムを選択できるようにするマルチセレクトも提供します。

私が必要とするのは、両方の組み合わせです...

4

1 に答える 1

0

最善の方法は、複数選択ボックスを使用することです。検索項目がデータベースで見つからない場合は、それを結果セットに追加します。別の検索フィールド「検索」(または任意の名前) をアクションに渡す必要があります。

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

新しく追加されたアイテムは MultiSelect ボックスに残り、残りのアイテムとまったく同じように扱われます (つまり、小さな十字をクリックすることで削除されます)。

データソースに追加する前に、電子メール アドレスが有効かどうかを確認する追加の検証を追加することもできます。しかし、あなたは要点を理解します。

お役に立てれば！

于 2016-01-26T14:41:53.210 に答える