AutoComplete

Autocomplete works like a select, but can hamdle easily several items. A code is selected by choosing the corresponding display value.

<div class="form-group">
    <label asp-for="Value" class="col-xs-12 control-label"></label>
    <div class="col-xs-12">
        <autocomplete asp-for="Value"
                      placeholder="first 3 letters of an US state"
                      display-property="DisplayValue"
                      dataset-name="countries"
                      max-results="10"
                      items-url="@(Url.Action("AutocompleteItems", "InputExamples", 
                                 new {search = "_zzz_" }))"
                      url-token="_zzz_"
                      items-value-property="Value"
                      items-display-property="Display" class="form-control" />
        <span asp-validation-for="Value" class="text-danger"></span>
    </div>
</div>

public class AutoCompleteExample
{
    public int Value { get; set; }
    public string DisplayValue { get; set; }
}

[HttpGet]
public IActionResult AutoComplete()
{
    return View();
}
 
[HttpGet]
[ResponseCache(Duration = 0, NoStore = true)]
public IActionResult AutocompleteItems(string search)
{
    if (string.IsNullOrEmpty(search)) return Json(new AutoCompleteItem[0]);
    return Json(states.Where(m => m.Display.StartsWith(search,
        StringComparison.CurrentCultureIgnoreCase)).OrderBy(m => m.Display));
}