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.
- <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>
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.
- <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>
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.
- <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>
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.