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