AutoComplete
AutoComplete
Incremental Search
This sample shows how to provide incremental search by using custom action as data source of AutoComplete.
Features
Search for types in mscorlib:
Description
This sample shows how to provide incremental search by using custom action as data source of AutoComplete.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | 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()); } } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | @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) } |