<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"))
.ShowClearButton(true)
.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)
.InputAttr("aria-label", "Position")
.OnValueChanged("position_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()
.Version(2)
.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">With Custom Store and Search Options</div>
<div class="dx-field">
<div class="dx-field-label">Current Client</div>
<div class="dx-field-value">
@(Html.DevExtreme().Autocomplete()
.DataSource(new JS("clientsStore"))
.MinSearchLength(2)
.SearchTimeout(500)
.Placeholder("Type client name...")
.ValueExpr("Text")
.OnValueChanged("client_changed")
)
</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",
state = "",
currentClient = "";
var clientsStore = new DevExpress.data.CustomStore({
key: "Value",
useDefaultSearch: true,
load(loadOptions) {
const deferred = $.Deferred();
const args = {};
[
'skip',
'take',
'filter'
].forEach((option) => {
if (option in loadOptions && isNotEmpty(loadOptions[option])) {
args[option] = JSON.stringify(loadOptions[option]);
}
});
$.ajax({
url: 'https://js.devexpress.com/Demos/Mvc/api/DataGridWebApi/CustomersLookup',
dataType: 'json',
data: args,
success(result) {
deferred.resolve(result.data);
},
error() {
deferred.reject('Data Loading Error');
},
timeout: 5000,
});
return deferred.promise();
}
});
function isNotEmpty(value) {
return value !== undefined && value !== null && value !== '';
}
function updateEmployeeInfo() {
var result = $.trim((firstName || "") + " " + (lastName || ""));
result += (result && position) ? (", " + position) : position || "";
result += (result && state) ? (", " + state) : state || "";
result += (result && currentClient) ? (", " + currentClient) : currentClient || "";
$("#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 state_changed(data) {
state = data.value;
updateEmployeeInfo();
}
function client_changed(data) {
currentClient = data.value;
updateEmployeeInfo();
}
</script>
using DevExtreme.AspNet.Data;
using DevExtreme.AspNet.Mvc;
using DevExtreme.MVC.Demos.Models.SampleData;
using System.Text.Json;
using System.Web.Mvc;
namespace DevExtreme.MVC.Demos.Controllers {
public class AutocompleteController : Controller {
public ActionResult Overview() {
return View();
}
[HttpGet]
public ActionResult GetNames(DataSourceLoadOptions loadOptions) {
return Content(JsonSerializer.Serialize(DataSourceLoader.Load(SampleData.Names, loadOptions)), "application/json");
}
[HttpGet]
public ActionResult GetSurnames(DataSourceLoadOptions loadOptions) {
return Content(JsonSerializer.Serialize(DataSourceLoader.Load(SampleData.Surnames, loadOptions)), "application/json");
}
[HttpGet]
public ActionResult GetCities(DataSourceLoadOptions loadOptions) {
return Content(JsonSerializer.Serialize(DataSourceLoader.Load(SampleData.Cities, loadOptions)), "application/json");
}
[HttpGet]
public ActionResult GetPositions(DataSourceLoadOptions loadOptions) {
return Content(JsonSerializer.Serialize(DataSourceLoader.Load(SampleData.Positions, loadOptions)), "application/json");
}
}
}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace DevExtreme.MVC.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;
using System.Web;
namespace DevExtreme.MVC.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;
using System.Web;
namespace DevExtreme.MVC.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;
}