JavaScript/jQuery Autocomplete - Customize Item Appearance

For a minor customization of Autocomplete items, you can define specific fields in item data objects. For example, the following code generates three items: the first is not customized, the second is disabled and the third is hidden.


import React from 'react';
import 'devextreme/dist/css/dx.light.css';
 
import { Autocomplete } from 'devextreme-react/autocomplete';
 
const dataSource = [
    { text: 'James' },
    { text: 'John', disabled: true },
    { text: 'Joseph', visible: false }
];
 
class App extends React.Component {
    render() {
        return (
            <Autocomplete
                dataSource={dataSource}
                valueExpr="text"
                placeholder="Type first name..."
            />
        );
    }
}
 
export default App;

If you need a more flexible solution, define an itemTemplate.


import React from 'react';
import 'devextreme/dist/css/dx.light.css';
 
import { Autocomplete } from 'devextreme-react/autocomplete';
 
const autocompleteData = [
    { country: "Afghanistan", capital: "Kabul" },
    { country: "Albania", capital: "Tirana" },
    // ...
];
 
const renderAutocompleteItem = (itemData) => {
    return (
        <div>
            <p>Country: <b>{itemData.country}</b></p>
            <p style={{color: "grey"}}>Capital: <b>{itemData.capital}</b></p>
        </div>
    );
};
 
class App extends React.Component {
    render() {
        return (
            <Autocomplete
                dataSource={autocompleteData}
                valueExpr="country"
                placeholder="Type country name..."
                itemRender={renderAutocompleteItem}
            />
        );
    }
}
 
export default App;

JavaScript/jQuery Autocomplete - Customize Item Appearance

See Also