Your search did not match any results.
Documentation

The Autocomplete widget is a textbox that provides suggestions while a user types into it.

<div class="form"> <div class="dx-fieldset"> <div class="dx-fieldset-header">Default Mode</div> <div class="dx-field"> <div class="dx-field-label">First Name</div> <div class="dx-field-value"> @(Html.DevExtreme().Autocomplete() .DataSource(d => d.Mvc().LoadAction("GetNames")) .Placeholder("Type first name...") .OnValueChanged("name_changed") ) </div> </div> </div> <div class="dx-fieldset"> <div class="dx-fieldset-header">With Clear Button</div> <div class="dx-field"> <div class="dx-field-label">Last Name</div> <div class="dx-field-value"> @(Html.DevExtreme().Autocomplete() .DataSource(d => d.Mvc().LoadAction("GetSurnames")) .Placeholder("Type last name...") .OnValueChanged("surname_changed") ) </div> </div> </div> <div class="dx-fieldset"> <div class="dx-fieldset-header">Disabled</div> <div class="dx-field"> <div class="dx-field-label">Position</div> <div class="dx-field-value"> @(Html.DevExtreme().Autocomplete() .DataSource(d => d.Mvc().LoadAction("GetPositions")) .Value("CEO") .Disabled(true) .OnValueChanged("position_changed") ) </div> </div> </div> <div class="dx-fieldset"> <div class="dx-fieldset-header">With Custom Search Options</div> <div class="dx-field"> <div class="dx-field-label">City</div> <div class="dx-field-value"> @(Html.DevExtreme().Autocomplete() .DataSource(d => d.Mvc().LoadAction("GetCities")) .MinSearchLength(2) .SearchTimeout(500) .Placeholder("Type two symbols to search...") .OnValueChanged("city_changed") ) </div> </div> </div> <div class="dx-fieldset"> <div class="dx-fieldset-header">Custom Item Template and Data Source Usage</div> <div class="dx-field"> <div class="dx-field-label">State</div> <div class="dx-field-value"> @(Html.DevExtreme().Autocomplete() .DataSource(d => d.OData() .Url("https://js.devexpress.com/Demos/DevAV/odata/States?$select=Sate_ID,State_Long,State_Short") .Key("Sate_ID") .KeyType(EdmType.Int32) ) .ValueExpr("State_Long") .Placeholder("Type state name...") .OnValueChanged("state_changed") .ItemTemplate(@<text> <div><%= State_Long %> (<%= State_Short %>)</div> </text>) ) </div> </div> </div> <div class="dx-fieldset"> <div class="dx-fieldset-header">Event Handling</div> <div class="employees-data"> Employee data: <span id="employee-data"></span> </div> </div> </div> <script> var firstName = "", lastName = "", position = "CEO", city = "", state = ""; function updateEmployeeInfo() { var result = $.trim((firstName || "") + " " + (lastName || "")); result += (result && position) ? (", " + position) : position; result += (result && city) ? (", " + city) : city; result += (result && state) ? (", " + state) : state; $("#employee-data").text(result); } function name_changed(data) { firstName = data.value; updateEmployeeInfo(); } function surname_changed(data) { lastName = data.value; updateEmployeeInfo(); } function position_changed(dat) { position = data.value; updateEmployeeInfo(); } function city_changed(data) { city = data.value; updateEmployeeInfo(); } function state_changed(data) { state = data.value; updateEmployeeInfo(); } </script>
using DevExtreme.AspNet.Data; using DevExtreme.AspNet.Mvc; using DevExtreme.NETCore.Demos.Models.SampleData; using Microsoft.AspNetCore.Mvc; using Newtonsoft.Json; namespace DevExtreme.NETCore.Demos.Controllers { public class AutocompleteController : Controller { public ActionResult Overview() { return View(); } [HttpGet] public ActionResult GetNames(DataSourceLoadOptions loadOptions) { return Content(JsonConvert.SerializeObject(DataSourceLoader.Load(SampleData.Names, loadOptions)), "application/json"); } [HttpGet] public ActionResult GetSurnames(DataSourceLoadOptions loadOptions) { return Content(JsonConvert.SerializeObject(DataSourceLoader.Load(SampleData.Surnames, loadOptions)), "application/json"); } [HttpGet] public ActionResult GetCities(DataSourceLoadOptions loadOptions) { return Content(JsonConvert.SerializeObject(DataSourceLoader.Load(SampleData.Cities, loadOptions)), "application/json"); } [HttpGet] public ActionResult GetPositions(DataSourceLoadOptions loadOptions) { return Content(JsonConvert.SerializeObject(DataSourceLoader.Load(SampleData.Positions, loadOptions)), "application/json"); } } }
using System; using System.Collections.Generic; using System.Linq; namespace DevExtreme.NETCore.Demos.Models.SampleData { public partial class SampleData { public static readonly string[] Cities = new[] { "Albuquerque", "Anaheim", "Anchorage", "Arlington", "Atlanta", "Aurora", "Austin", "Bakersfield", "Baltimore", "Baton Rouge", "Boise", "Boston", "Buffalo", "Chandler", "Charlotte", "Chesapeake", "Chicago", "Chula Vista", "Cincinnati", "Cleveland", "Colorado Springs", "Columbus", "Corpus Christi", "Dallas", "Denver", "Detroit", "Durham", "El Paso", "Fort Wayne", "Fort Worth", "Fremont", "Fresno", "Garland", "Gilbert", "Glendale", "Greensboro", "Henderson", "Hialeah", "Honolulu", "Houston", "Indianapolis", "Irvine", "Irving", "Jacksonville", "Jersey City", "Kansas City", "Laredo", "Las Vegas", "Lexington", "Lincoln", "Long Beach", "Los Angeles", "Louisville", "Lubbock", "Madison", "Memphis", "Mesa", "Miami", "Milwaukee", "Minneapolis", "Nashville", "New Orleans", "New York", "Newark", "Norfolk", "North Las Vegas", "Oakland", "Oklahoma City", "Omaha", "Orlando", "Philadelphia", "Phoenix", "Pittsburgh", "Plano", "Portland", "Raleigh", "Reno", "Richmond", "Riverside", "Sacramento", "Saint Paul", "San Antonio", "San Diego", "San Francisco", "San Jose", "Santa Ana", "Scottsdale", "Seattle", "St. Louis", "St. Petersburg", "Stockton", "Tampa", "Toledo", "Tucson", "Tulsa", "Virginia Beach", "Washington", "Wichita", "Winston–Salem" }; } }
using System; using System.Collections.Generic; using System.Linq; namespace DevExtreme.NETCore.Demos.Models.SampleData { public partial class SampleData { public static readonly string[] Names = new[] { "James", "John", "Robert", "Michael", "William", "David", "Richard", "Charles", "Joseph", "Thomas", "Christopher", "Daniel", "Paul", "Mark", "Donald", "George", "Kenneth", "Steven", "Edward", "Brian", "Ronald", "Anthony", "Kevin", "Jason", "Jeff", "Mary", "Patricia", "Linda", "Barbara", "Elizabeth", "Jennifer", "Maria", "Susan", "Margaret", "Dorothy", "Lisa", "Nancy", "Karen", "Betty", "Helen", "Sandra", "Donna", "Carol", "Ruth", "Sharon", "Michelle", "Laura", "Sarah", "Kimberly", "Deborah" }; } }
using System; using System.Collections.Generic; using System.Linq; namespace DevExtreme.NETCore.Demos.Models.SampleData { public partial class SampleData { public static readonly string[] Surnames = new[] { "Anderson", "Smith", "Johnson", "Williams", "Jones", "Brown", "Davis", "Miller", "Wilson", "Moore", "Taylor", "Thomas", "Jackson", "White", "Harris", "Martin", "Thompson", "Garcia", "Martinez", "Robinson", "Clark", "Rodriguez", "Lewis", "Lee", "Walker", "Hall", "Allen", "Young", "Hernandez", "King", "Wright", "Lopez", "Hill", "Scott", "Green", "Adams", "Baker", "Gonzalez", "Nelson", "Carter", "Mitchell", "Perez", "Roberts", "Turner", "Phillips", "Campbell", "Parker", "Evans", "Edwards", "Collins" }; } }
.employees-data { padding-top: 16px; padding-bottom: 10px; }