AutoComplete
AutoComplete
Overview
Features
Sample
Type in a country name
Type in a country name
Settings
Description
This sample shows the basic usage of the AutoComplete control.
When Case Sensitive Search is true, the user types are searched as case-sensitive
When Begins With Search is true, the user types are searched as beginning
When Case Sensitive Search is true, the user types are searched as case-sensitive
When Begins With Search is true, the user types are searched as beginning
Source
IndexController.cs
using Microsoft.AspNetCore.Http; using Microsoft.AspNetCore.Mvc; using MvcExplorer.Models; using System.Collections.Generic; namespace MvcExplorer.Controllers { public partial class AutoCompleteController : Controller { private readonly ControlOptions _options = new ControlOptions { Options = new OptionDictionary { {"Case Sensitive Search",new OptionItem{ Values = new List<string> { "True", "False"}, CurrentValue = "False"}}, {"Begins With Search",new OptionItem{ Values = new List<string> { "True", "False"}, CurrentValue = "False"}} } }; public ActionResult Index(IFormCollection collection) { _options.LoadPostData(collection); ViewBag.DemoOptions = _options; ViewBag.Countries = Countries.GetCountries(); return View(); } } }
Index.cshtml
@{ ControlOptions optionsModel = ViewBag.DemoOptions; ViewBag.DemoSettings = true; List<string> countries = ViewBag.Countries; } @section Styles{ <style> .highlight { background-color: #ff0; color: #000; } </style> } <div> <label>@Html.Raw(AutoCompleteRes.Index_Text2)</label> <p>@Html.Raw(AutoCompleteRes.Index_Text0)</p> <c1-auto-complete case-sensitive-search="@Convert.ToBoolean(optionsModel.Options["Case Sensitive Search"].CurrentValue)" begins-with-search="@Convert.ToBoolean(optionsModel.Options["Begins With Search"].CurrentValue)"> <c1-items-source source-collection="@countries"> </c1-items-source> </c1-auto-complete> </div> <div> <label>@Html.Raw(AutoCompleteRes.Index_Text3)</label> <p>@Html.Raw(AutoCompleteRes.Index_Text1)</p> <c1-auto-complete css-match="highlight" case-sensitive-search="@Convert.ToBoolean(optionsModel.Options["Case Sensitive Search"].CurrentValue)"> <c1-items-source source-collection="@countries"> </c1-items-source> </c1-auto-complete> </div> @section Settings{ @await Html.PartialAsync("_OptionsMenu", optionsModel) } @section Description{ @Html.Raw(AutoCompleteRes.Index_Text4) <br /> @Html.Raw(AutoCompleteRes.CaseSensitiveSearchDescription_Text0) <br /> @Html.Raw(AutoCompleteRes.BeginsWithSearchDescription_Text0) }
Documentation