The following code adds the Autocomplete to your page. The simplest configuration of the UI component requires only a dataSource to be specified. In addition, you can specify the placeholder to be displayed when the Autocomplete is empty.

jQuery

HTML

JavaScript

<div id="autocompleteContainer"></div>

const autocompleteData = [
    "Afghanistan",
    "Albania",
    // ...
];
$(function() {
    $("#autocompleteContainer").dxAutocomplete({
        dataSource: autocompleteData,
        placeholder: 'Type country name...'
    });
});

Angular

HTML

TypeScript

<dx-autocomplete
    [dataSource]="autocompleteData"
    placeholder="Type country name...">
</dx-autocomplete>

import { DxAutocompleteModule } from 'devextreme-angular'
// ...
export class AppComponent {
    autocompleteData = [
        "Afghanistan",
        "Albania",
        // ...
    ]
}
@NgModule({
    imports: [
        // ...
        DxAutocompleteModule
    ],
    // ...
})

Vue

<template>
    <DxAutocomplete
        :data-source="autocompleteData"
        placeholder="Type country name..."
    />
</template>

<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { DxAutocomplete } from 'devextreme-vue/autocomplete';

export default {
    components: {
        DxAutocomplete
    },
    data() {
        return {
            autocompleteData: [
                'Afghanistan',
                'Albania',
                // ...
            ]
        };
    }
}
</script>

React

import React from 'react';
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { Autocomplete } from 'devextreme-react/autocomplete';

const autocompleteData = [
    'Afghanistan',
    'Albania',
    // ...
];

class App extends React.Component {
    render() {
        return (
            <Autocomplete
                dataSource={autocompleteData}
                placeholder="Type country name..."
            />
        );
    }
}

export default App;

If your data is an array of objects, use the valueExpr property to specify the field providing suggestions.

jQuery

JavaScript

const autocompleteData = [
    { country: "Afghanistan", capital: "Kabul" },
    { country: "Albania", capital: "Tirana" },
    // ...
];

$(function() {
    $("#autocompleteContainer").dxAutocomplete({
        dataSource: autocompleteData,
        placeholder: 'Type country name...',
        valueExpr: 'country'
    });
});

Angular

HTML

TypeScript

<dx-autocomplete
    [dataSource]="autocompleteData"
    placeholder="Type country name..."
    valueExpr="country">
</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"
        placeholder="Type country name..."
        value-expr="country"
    />
</template>

<script>
import 'devextreme/dist/css/dx.common.css';
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.common.css';
import 'devextreme/dist/css/dx.light.css';

import { Autocomplete } from 'devextreme-react/autocomplete';

const autocompleteData = [
    { country: 'Afghanistan', capital: 'Kabul' },
    { country: 'Albania', capital: 'Tirana' },
    // ...
];

class App extends React.Component {
    render() {
        return (
            <Autocomplete
                dataSource={autocompleteData}
                placeholder="Type country name..."
                valueExpr="country"
            />
        );
    }
}

export default App;

Usually, the data field that provides suggestions is the same data field that is searched for the typed text. If in your case, it is two different fields: assign the field providing suggestions to the valueExpr property and the field to be searched - to the searchExpr property. Note that searchExpr also accepts arrays in case you need several fields to search in.

jQuery

JavaScript

const autocompleteData = [
    { country: "Afghanistan", capital: "Kabul" },
    { country: "Albania", capital: "Tirana" },
    // ...
];

$(function() {
    $("#autocompleteContainer").dxAutocomplete({
        dataSource: autocompleteData,
        placeholder: 'Type capital name',
        valueExpr: 'country',
        searchExpr: 'capital'            
    });
});

Angular

HTML

TypeScript

<dx-autocomplete
    [dataSource]="autocompleteData"
    placeholder="Type country name..."
    valueExpr="country"
    searchExpr="capital">
</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"
        placeholder="Type capital name"
        value-expr="country"
        search-expr="capital"
    />
</template>

<script>
import 'devextreme/dist/css/dx.common.css';
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.common.css';
import 'devextreme/dist/css/dx.light.css';

import { Autocomplete } from 'devextreme-react/autocomplete';

const autocompleteData = [
    { country: 'Afghanistan', capital: 'Kabul' },
    { country: 'Albania', capital: 'Tirana' },
    // ...
];

class App extends React.Component {
    render() {
        return (
            <Autocomplete
                dataSource={autocompleteData}
                placeholder="Type capital name"
                valueExpr="country"
                searchExpr="capital"
            />
        );
    }
}

export default App;

General Information

.NET Subscription

Common Tools

Quality Assurance and Productivity

Desktop

Controls

Tools

Frameworks and Libraries

Web

Controls and Extensions

Tools

Maintenance Mode

Mobile

Enterprise and Analytic Tools

End-User Documentation

General Information

.NET Subscription

Common Tools

Quality Assurance and Productivity

Desktop

Controls

Tools

Frameworks and Libraries

Web

Controls and Extensions

Tools

Maintenance Mode

Mobile

Enterprise and Analytic Tools

End-User Documentation

jQuery Autocomplete - Overview

jQuery

Angular

Vue

React

jQuery

Angular

Vue

React

jQuery

Angular

Vue

React

See Also