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.
jQuery
JavaScript
$(function() { $("#autocompleteContainer").dxAutocomplete({ valueExpr: "text", dataSource: [ { text: "James" }, { text: "John", disabled: true }, { text: "Joseph", visible: false } ], placeholder: "Type first name..." }); });
Angular
TypeScript
HTML
import { DxAutocompleteModule } from "devextreme-angular"; // ... export class AppComponent { autocompleteData = [ { text: "James" }, { text: "John", disabled: true }, { text: "Joseph", visible: false } ] } @NgModule({ imports: [ // ... DxAutocompleteModule ], // ... })
<dx-autocomplete [dataSource]="autocompleteData" valueExpr="text" placeholder="Type first name..."> </dx-autocomplete>
Vue
<template> <DxAutocomplete :data-source="dataSource" value-expr="text" placeholder="Type first name..." /> </template> <script> import 'devextreme/dist/css/dx.light.css'; import { DxAutocomplete } from 'devextreme-vue/autocomplete'; export default { components: { DxAutocomplete }, data() { return { dataSource: [ { text: 'James' }, { text: 'John', disabled: true }, { text: 'Joseph', visible: false } ] }; } } </script>
React
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.
jQuery
JavaScript
const autocompleteData = [ { country: "Afghanistan", capital: "Kabul" }, { country: "Albania", capital: "Tirana" }, // ... ]; $(function() { $("#autocompleteContainer").dxAutocomplete({ dataSource: autocompleteData, valueExpr: 'country', placeholder: 'Type country name...', itemTemplate: function (itemData, itemIndex, itemElement) { itemElement.append("<p>Country: <b>" + itemData.country + "</b></p>"); itemElement.append("<p style='color:grey;'>Capital: <b>" + itemData.capital + "</b></p>"); } }); });
Angular
HTML
TypeScript
<dx-autocomplete [dataSource]="autocompleteData" valueExpr="country" placeholder="Type country name..." itemTemplate="full"> <div *dxTemplate="let itemObj of 'full'"> <p>Country: <b>{{itemObj.country}}</b></p> <p style="color:grey;">Capital: <b>{{itemObj.capital}}</b></p> </div> </dx-autocomplete>
import { DxAutocompleteModule } from "devextreme-angular"; // ... export class AppComponent { autocompleteData = [ { country: "Afghanistan", capital: "Kabul" }, { country: "Albania", capital: "Tirana" }, // ... ] } @NgModule({ imports: [ // ... DxAutocompleteModule ], // ... })
Vue
<template> <DxAutocomplete :data-source="autocompleteData" value-expr="country" placeholder="Type country name..." item-template="full"> <template #full="{ data }"> <div> <p>Country: <b>{{data.country}}</b></p> <p style="color:grey;">Capital: <b>{{data.capital}}</b></p> </div> </template> </DxAutocomplete> </template> <script> import 'devextreme/dist/css/dx.light.css'; import { DxAutocomplete } from 'devextreme-vue/autocomplete'; export default { components: { DxAutocomplete }, data() { return { autocompleteData: [ { country: "Afghanistan", capital: "Kabul" }, { country: "Albania", capital: "Tirana" }, // ... ] }; } } </script>
React
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;
jQuery
You can also customize an individual Autocomplete item. For this purpose, declare a template for this item as a script and pass its id
to the template field.
HTML
JavaScript
<script id="individualTemplate" type="text/html"> <!-- ... --> </script>
const autocompleteData = [ { text: "James"}, { text: "Joseph", template: $("#individualTemplate") }, // ... ];
See Also
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.