All docs
V20.2
22.1
21.2
21.1
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.
A newer version of this page is available. Switch to the current version.

Configure Search Parameters

The Autocomplete can provide suggestions in two different modes: 'contains' (by default) and 'startswith'. You can use the searchMode property to change the mode.

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

$(function() {
    $("#autocompleteContainer").dxAutocomplete({
        dataSource: autocompleteData,
        valueExpr: 'country',
        searchMode: 'startswith'
    });
});
Angular
HTML
TypeScript
<dx-autocomplete
    [dataSource]="autocompleteData"
    valueExpr="country"
    searchMode="startswith">
</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"
        search-mode="startswith"
    />
</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}
                valueExpr="country"
                searchMode="startswith"
            />
        );
    }
}

export default App;

By default, the Autocomplete UI component starts providing suggestions once an end user types the first character. To increase the number of characters that triggers suggestions, use the minSearchLength property.

jQuery
JavaScript
$(function() {
    $("#autocompleteContainer").dxAutocomplete({
        // ...
        minSearchLength: 3
    });
});
Angular
HTML
TypeScript
<dx-autocomplete ...
    [minSearchLength]="3">
</dx-autocomplete>
import { DxAutocompleteModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxAutocompleteModule
    ],
    // ...
})
Vue
<template>
    <DxAutocomplete :min-search-length="3"/>
</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
    }
}
</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';

class App extends React.Component {
    render() {
        return (
            <Autocomplete minSearchLength={3}/>
        );
    }
}

export default App;

You can also specify the time interval the UI component should wait before providing suggestions. Assign this time interval measured in milliseconds to the searchTimeout property.

jQuery
JavaScript
$(function() {
    $("#autocompleteContainer").dxAutocomplete({
        // ...
        searchTimeout: 500
    });
});
Angular
HTML
TypeScript
<dx-autocomplete ...
    [searchTimeout]="500">
</dx-autocomplete>
import { DxAutocompleteModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxAutocompleteModule
    ],
    // ...
})
Vue
<template>
    <DxAutocomplete :search-timeout="500"/>
</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
    }
}
</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';

class App extends React.Component {
    render() {
        return (
            <Autocomplete searchTimeout={500}/>
        );
    }
}

export default App;
See Also