React Autocomplete - 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