AutoComplete
AutoComplete
Overview
This sample shows the basic usage of the AutoComplete control.
Features
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
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 | 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(); } } } |
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 32 33 34 35 36 37 38 39 40 41 42 43 | @ { 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) } |