Your search did not match any results.
Autocomplete

Autocomplete

Autocomplete is a text box that displays suggestions while a user types. This demo shows how to customize the Autocomplete component and handle value changes.

Bind Autocomplete to Data

Use one of the following properties to supply data to the component:

  • items[]
    Accepts a local data array.

  • dataSource
    Accepts a local data array, DataSource object, or DevExtreme data store. In this demo, every Autocomplete component is bound to a local array, except the "Custom Item Template and Data Source Usage" component that uses an ODataStore.

The value property stores the selected item. You can use the same property to select an item programmatically, as shown in the "Disabled" Autocomplete component.

If the data source contains objects, you should specify the valueExpr property. It accepts a data field name that uniquely identifies each data object. In this demo, valueExpr is set only for the "Custom Item Template and Data Source Usage" Autocomplete because others are bound to arrays of primitive values.

Configure Search Parameters

When a user types the first character, Autocomplete displays suggestions. To increase the number of characters that triggers suggestions, use the minSearchLength property. You can also specify the time interval Autocomplete should wait before it displays suggestions. Assign this time interval in milliseconds to the searchTimeout property. See the "With Custom Search Options" Autocomplete component for an example.

Usually, the data field that supplies Autocomplete with suggestions (valueExpr) is the same data field that is searched for the typed text. If you use two different fields, assign the field that supplies Autocomplete with suggestions to the valueExpr property and the field to be searched to the searchExpr property. Note that searchExpr also accepts arrays if you want to search multiple fields.

Handle Value Change

To handle value changes, implement the onValueChanged function. In this demo, we use onValueChanged to display the values of all Autocomplete components.

Appearance Customization

You can specify the following properties to customize the Autocomplete component's appearance:

  • placeholder
    The text that is displayed when Autocomplete is empty.

  • showClearButton
    Adds a Clear button that empties the Autocomplete value as shown in the "With Clear Button" Autocomplete component.

  • disabled
    Disables the component.

  • itemTemplate
    Customizes the appearance of the Autocomplete suggestions. See the "Custom Item Template and Data Source Usage" component for an example.

Backend API
Copy to CodePen
Apply
Reset
$(() => { let firstName = ''; let lastName = ''; const position = positions[0]; let city = ''; let state = ''; $('#first-name').dxAutocomplete({ dataSource: names, placeholder: 'Type first name...', onValueChanged(data) { firstName = data.value; updateEmployeeInfo(); }, }); $('#last-name').dxAutocomplete({ dataSource: surnames, placeholder: 'Type last name...', showClearButton: true, onValueChanged(data) { lastName = data.value; updateEmployeeInfo(); }, }); $('#position').dxAutocomplete({ dataSource: positions, value: position, disabled: true, }); $('#city').dxAutocomplete({ dataSource: cities, minSearchLength: 2, searchTimeout: 500, placeholder: 'Type two symbols to search...', onValueChanged(data) { city = data.value; updateEmployeeInfo(); }, }); $('#state').dxAutocomplete({ 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(data) { return $(`<div>${data.State_Long} (${data.State_Short})</div>`); }, onValueChanged(data) { state = data.value; updateEmployeeInfo(); }, }); function updateEmployeeInfo() { let result = $.trim(`${firstName || ''} ${lastName || ''}`); result += (result && position) ? (`, ${position}`) : position; result += (result && city) ? (`, ${city}`) : city; result += (result && state) ? (`, ${state}`) : state; $('#employee-data').text(result); } });
<!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="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/22.1.3/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/22.1.3/css/dx.light.css" /> <script src="https://cdn3.devexpress.com/jslib/22.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 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 id="first-name"></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 id="last-name"></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 id="position"></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 id="city"></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 id="state"></div> </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> </div> </body> </html>
.employees-data { padding-top: 16px; padding-bottom: 10px; }
const 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']; const 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', ]; const positions = ['CEO', 'COO', 'CTO', 'CMO', 'HR Manager', 'IT Manager', 'Controller', 'Sales Manager', 'Support Manager']; const 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'];