const DemoApp = angular.module('DemoApp', ['dx']);
DemoApp.controller('DemoController', ($scope, $http, $q) => {
let firstName = '';
let lastName = '';
const position = positions[0];
let state = '';
let currentClient = '';
$scope.fullInfo = '';
$scope.autocomplete = {
defaultMode: {
dataSource: names,
placeholder: 'Type first name...',
onValueChanged(data) {
firstName = data.value;
updateEmployeeInfo();
},
},
withClearButton: {
dataSource: surnames,
placeholder: 'Type last name...',
showClearButton: true,
onValueChanged(data) {
lastName = data.value;
updateEmployeeInfo();
},
},
disabled: {
dataSource: positions,
value: position,
disabled: true,
},
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(data) {
return $(`<div>${data.State_Long} (${data.State_Short})</div>`);
},
onValueChanged(data) {
state = data.value;
updateEmployeeInfo();
},
},
customStoreUsage: {
dataSource: new DevExpress.data.CustomStore({
key: 'Value',
useDefaultSearch: true,
load(loadOptions) {
const params = {};
[
'skip',
'take',
'filter',
].forEach((option) => {
if (option in loadOptions && isNotEmpty(loadOptions[option])) {
params[option] = JSON.stringify(loadOptions[option]);
}
});
return $http.get('https://js.devexpress.com/Demos/Mvc/api/DataGridWebApi/CustomersLookup', { params })
.then((response) => ({
data: response.data.data,
}), () => $q.reject('Data Loading Error'));
},
}),
minSearchLength: 2,
searchTimeout: 500,
placeholder: 'Type client name...',
valueExpr: 'Text',
onValueChanged(data) {
currentClient = data.value;
updateEmployeeInfo();
},
},
};
function updateEmployeeInfo() {
let result = '';
result += $.trim(`${firstName || ''} ${lastName || ''}`);
result += (result && position) ? (`, ${position}`) : position || '';
result += (result && state) ? (`, ${state}`) : state || '';
result += (result && currentClient) ? (`, ${currentClient}`) : currentClient || '';
$scope.fullInfo = result;
}
function isNotEmpty(value) {
return value !== undefined && value !== null && value !== '';
}
});
<!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.2.6/css/dx.light.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script>window.angular || document.write(decodeURIComponent('%3Cscript src="js/angular.min.js"%3E%3C/script%3E'))</script>
<script src="https://cdn3.devexpress.com/jslib/22.2.6/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" ng-app="DemoApp" ng-controller="DemoController">
<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 dx-autocomplete="autocomplete.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 dx-autocomplete="autocomplete.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 dx-autocomplete="autocomplete.disabled"></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 dx-autocomplete="autocomplete.customItemTemplate"></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 dx-autocomplete="autocomplete.customStoreUsage"></div>
</div>
</div>
</div>
<div class="dx-fieldset">
<div class="dx-fieldset-header">Event Handling</div>
<div class="employees-data"> Employee data: <span>{{fullInfo}}</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'];
