App.js

import React, { useCallback, useState } from 'react';
import { CustomStore } from 'devextreme-react/common/data';
import { Autocomplete } from 'devextreme-react/autocomplete';
import 'whatwg-fetch';
import AspNetData from 'devextreme-aspnet-data-nojquery';
import { names, surnames, positions } from './data.js';

function isNotEmpty(value) {
  return value !== undefined && value !== null && value !== '';
}
const positionLabel = { 'aria-label': 'Position' };
const position = positions[0];
const states = AspNetData.createStore({
  loadUrl: 'https://js.devexpress.com/Demos/NetCore/api/DataGridStatesLookup',
  key: 'ID',
});
const clientsStore = new CustomStore({
  key: 'Value',
  useDefaultSearch: true,
  load: (loadOptions) => {
    let params = '?';
    const loadOptionKeys = ['skip', 'take', 'filter'];
    loadOptionKeys.forEach((option) => {
      if (option in loadOptions && isNotEmpty(loadOptions[option])) {
        params += `${option}=${JSON.stringify(loadOptions[option])}&`;
      }
    });
    params = params.slice(0, -1);
    return fetch(
      `https://js.devexpress.com/Demos/NetCore/api/DataGridWebApi/CustomersLookup${params}`,
    )
      .then((response) => response.json())
      .then((data) => ({
        data: data.data,
      }))
      .catch(() => {
        throw new Error('Data Loading Error');
      });
  },
});
const renderState = (data) => (
  <span>
    {data.Name} ({data.Short})
  </span>
);
function App() {
  const [firstName, setFirstName] = useState('');
  const [lastName, setLastName] = useState('');
  const [state, setState] = useState('');
  const [currentClient, setCurrentClient] = useState('');
  const handleFirstNameChange = useCallback((e) => {
    setFirstName(e.value);
  }, []);
  const handleLastNameChange = useCallback((e) => {
    setLastName(e.value);
  }, []);
  const handleStateChange = useCallback((e) => {
    setState(e.value);
  }, []);
  const handleCurrentClientChange = useCallback((e) => {
    setCurrentClient(e.value);
  }, []);
  let fullInfo = '';
  fullInfo += `${firstName || ''} ${lastName || ''}`.trim();
  fullInfo += fullInfo && position ? `, ${position}` : position || '';
  fullInfo += fullInfo && state ? `, ${state}` : state || '';
  fullInfo += fullInfo && currentClient ? `, ${currentClient}` : currentClient || '';
  return (
    <div className="form">
      <div className="dx-fieldset">
        <div className="dx-fieldset-header">Default Mode</div>
        <div className="dx-field">
          <div className="dx-field-label">First Name</div>
          <div className="dx-field-value">
            <Autocomplete
              dataSource={names}
              value={firstName}
              onValueChanged={handleFirstNameChange}
              placeholder="Type first name..."
            />
          </div>
        </div>
      </div>

      <div className="dx-fieldset">
        <div className="dx-fieldset-header">With Clear Button</div>
        <div className="dx-field">
          <div className="dx-field-label">Last Name</div>
          <div className="dx-field-value">
            <Autocomplete
              dataSource={surnames}
              value={lastName}
              onValueChanged={handleLastNameChange}
              showClearButton={true}
              placeholder="Type last name..."
            />
          </div>
        </div>
      </div>

      <div className="dx-fieldset">
        <div className="dx-fieldset-header">Disabled</div>
        <div className="dx-field">
          <div className="dx-field-label">Position</div>
          <div className="dx-field-value">
            <Autocomplete
              dataSource={positions}
              value={position}
              disabled={true}
              inputAttr={positionLabel}
            />
          </div>
        </div>
      </div>

      <div className="dx-fieldset">
        <div className="dx-fieldset-header">Custom Item Template and Data Source Usage</div>
        <div className="dx-field">
          <div className="dx-field-label">State</div>
          <div className="dx-field-value">
            <Autocomplete
              dataSource={states}
              value={state}
              valueExpr="Name"
              onValueChanged={handleStateChange}
              placeholder="Type state name..."
              itemRender={renderState}
            />
          </div>
        </div>
      </div>

      <div className="dx-fieldset">
        <div className="dx-fieldset-header">Custom Store and Search Options</div>
        <div className="dx-field">
          <div className="dx-field-label">Current Client</div>
          <div className="dx-field-value">
            <Autocomplete
              dataSource={clientsStore}
              value={currentClient}
              valueExpr="Text"
              onValueChanged={handleCurrentClientChange}
              minSearchLength={2}
              searchTimeout={500}
              placeholder="Type client name..."
            />
          </div>
        </div>
      </div>

      <div className="dx-fieldset">
        <div className="dx-fieldset-header">Event Handling</div>
        <div className="employees-data">
          Employee data: <span>{fullInfo}</span>
        </div>
      </div>
    </div>
  );
}
export default App;