$(() => {
let firstName = '';
let lastName = '';
const position = positions[0];
let state = '';
let currentClient = '';
$('#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,
inputAttr: { 'aria-label': 'Position' },
});
$('#state').dxAutocomplete({
dataSource: new DevExpress.data.ODataStore({
version: 2,
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();
},
});
$('#current-client').dxAutocomplete({
dataSource: 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();
},
}),
minSearchLength: 2,
searchTimeout: 500,
placeholder: 'Type client name...',
valueExpr: 'Text',
onValueChanged(data) {
currentClient = data.value;
updateEmployeeInfo();
},
});
function updateEmployeeInfo() {
let result = $.trim(`${firstName || ''} ${lastName || ''}`);
result += (result && position) ? (`, ${position}`) : position || '';
result += (result && state) ? (`, ${state}`) : state || '';
result += (result && currentClient) ? (`, ${currentClient}`) : currentClient || '';
$('#employee-data').text(result);
}
function isNotEmpty(value) {
return value !== undefined && value !== null && value !== '';
}
});
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<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=5.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/24.1.7/css/dx.light.css" />
<script src="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">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">Custom Store and Search Options</div>
<div class="dx-field">
<div class="dx-field-label">Current Client</div>
<div class="dx-field-value">
<div id="current-client"></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'];