AutoComplete
AutoComplete
インクリメンタルサーチ
機能
サンプル
mscorlib で型を検索します。
説明
このサンプルでは、カスタムアクションを AutoComplete のデータソースとして使用して、インクリメンタルサーチを提供する方法を示します。
ソース
CustomActionController.cs
using System.Linq; using Microsoft.AspNetCore.Mvc; using C1.Web.Mvc.Serialization; using System.Reflection; namespace MvcExplorer.Controllers { public partial class AutoCompleteController : Controller { public ActionResult CustomAction() { return View(); } public ActionResult Heuristic(string query, int max) { var prefix = new[] { "What is ", "Where to find ", "Who is best at ", "Why ", "How to make " }; return this.C1Json(prefix.Select(f => f + query + "?").ToList()); } public ActionResult TypesInMscorlib(string query, int max) { query = query ?? string.Empty; var types = typeof(object).GetTypeInfo().Assembly.GetTypes(); return this.C1Json(types .Where(t => t.FullName.ToUpper().Contains(query.ToUpper())) .Select(t => t.FullName) .Take(max).ToList()); } } }
CustomAction.cshtml
@section Styles{ <style> .highlight { background-color: #ff0; color: #000; } </style> } <div> <label>@Html.Raw(AutoCompleteRes.CustomAction_Text1)</label> <c1-auto-complete items-source-action="@Url.Action("Heuristic")"> </c1-auto-complete> </div> <div> <label>@Html.Raw(AutoCompleteRes.CustomAction_Text2)</label> <p>@Html.Raw(AutoCompleteRes.CustomAction_Text0)</p> <c1-auto-complete max-items="10" css-match="highlight" items-source-action="@Url.Action("TypesInMscorlib")"> </c1-auto-complete> </div> @section Description{ @Html.Raw(AutoCompleteRes.CustomAction_Text3) }
マニュアル