Your search did not match any results.
Autocomplete

Overview

Documentation
The Autocomplete widget is a textbox that provides suggestions while a user types into it.
Copy to Codepen
Apply
Reset
window.onload = function() { var firstName = "", lastName = "", position = positions[0], city = "", state = ""; var viewModel = { defaultMode: { dataSource: names, placeholder: "Type first name...", onValueChanged: function(data) { firstName = data.value; updateEmployeeInfo(); } }, withClearButton: { dataSource: surnames, placeholder: "Type last name...", showClearButton: true, onValueChanged: function(data) { lastName = data.value; updateEmployeeInfo(); } }, disabled: { dataSource: positions, value: position, disabled: true }, customSearchOptions: { dataSource: cities, minSearchLength: 2, searchTimeout: 500, placeholder: "Type two symbols to search...", onValueChanged: function(data) { city = data.value; updateEmployeeInfo(); } }, customItemTemplate: { dataSource: new DevExpress.data.ODataStore({ url: "https://js.devexpress.com/Demos/DevAV/odata/States?$select=Sate_ID,State_Long,State_Short", key: "Sate_ID", keyType: "Int32" }), placeholder: "Type state name...", valueExpr: "State_Long", itemTemplate: function(data) { return $("<div>" + data.State_Long + " (" + data.State_Short + ")" + "</div>"); }, onValueChanged: function(data) { state = data.value; updateEmployeeInfo(); } }, fullInfo: ko.observable("") }; function updateEmployeeInfo() { var result = ""; result += $.trim((firstName || "") + " " + (lastName || "")); result += (result && position) ? (", " + position) : position; result += (result && city) ? (", " + city) : city; result += (result && state) ? (", " + state) : state; viewModel.fullInfo(result); } ko.applyBindings(viewModel, document.getElementById("autocomplete-demo")); };
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <script src="js/jquery-3.1.0.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/17.1.3/css/dx.spa.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/17.1.3/css/dx.common.css" /> <link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/17.1.3/css/dx.light.css" /> <link rel="dx-theme" data-theme="android5.light" href="https://cdn3.devexpress.com/jslib/17.1.3/css/dx.android5.light.css" /> <link rel="dx-theme" data-theme="ios7.default" href="https://cdn3.devexpress.com/jslib/17.1.3/css/dx.ios7.default.css" /> <link rel="dx-theme" data-theme="win10.black" href="https://cdn3.devexpress.com/jslib/17.1.3/css/dx.win10.black.css" /> <link rel="dx-theme" data-theme="win10.white" href="https://cdn3.devexpress.com/jslib/17.1.3/css/dx.win10.white.css" /> <script src="https://cdn3.devexpress.com/jslib/17.1.3/js/dx.all.js"></script> <script src="data.js"></script> <link rel="stylesheet" type ="text/css" href ="styles.css" /> <script src="index.js"></script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="autocomplete-demo" 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"> <div data-bind="dxAutocomplete: defaultMode"></div> </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"> <div data-bind="dxAutocomplete: withClearButton"></div> </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"> <div data-bind="dxAutocomplete: disabled"></div> </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"> <div data-bind="dxAutocomplete: customSearchOptions"></div> </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"> <div data-bind="dxAutocomplete: customItemTemplate"></div> </div> </div> </div> <div class="dx-fieldset"> <div class="dx-fieldset-header">Event Handling</div> <div class="employees-data"> Employee data: <span data-bind="text: fullInfo"></span> </div> </div> </div> </div> </body> </html>
.employees-data { padding-top: 16px; padding-bottom: 10px; }
var names = ["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"]; var surnames = ["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" ]; var positions = ["CEO", "COO", "CTO", "CMO", "HR Manager", "IT Manager", "Controller", "Sales Manager", "Support Manager"]; var cities = ["New York", "Los Angeles", "Chicago", "Houston", "Philadelphia", "Phoenix", "San Antonio", "San Diego", "Dallas", "San Jose", "Austin", "Indianapolis", "Jacksonville", "San Francisco", "Columbus", "Charlotte", "Fort Worth", "Detroit", "El Paso", "Memphis", "Seattle", "Denver", "Washington", "Boston", "Nashville", "Baltimore", "Oklahoma City", "Louisville", "Portland", "Las Vegas", "Milwaukee", "Albuquerque", "Tucson", "Fresno", "Sacramento", "Long Beach", "Kansas City", "Mesa", "Virginia Beach", "Atlanta", "Colorado Springs", "Omaha", "Raleigh", "Miami", "Oakland", "Minneapolis", "Tulsa", "Cleveland", "Wichita", "Arlington", "New Orleans", "Bakersfield", "Tampa", "Honolulu", "Aurora", "Anaheim", "Santa Ana", "St. Louis", "Riverside", "Corpus Christi", "Lexington", "Pittsburgh", "Anchorage", "Stockton", "Cincinnati", "Saint Paul", "Toledo", "Greensboro", "Newark", "Plano", "Henderson", "Lincoln", "Buffalo", "Jersey City", "Chula Vista", "Fort Wayne", "Orlando", "St. Petersburg", "Chandler", "Laredo", "Norfolk", "Durham", "Madison", "Lubbock", "Irvine", "Winston–Salem", "Glendale", "Garland", "Hialeah", "Reno", "Chesapeake", "Gilbert", "Baton Rouge", "Irving", "Scottsdale", "North Las Vegas", "Fremont", "Boise", "Richmond"];