Vue 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.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.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.light.css';
  •  
  • import { DxAutocomplete } from 'devextreme-vue/autocomplete';
  •  
  • export default {
  • components: {
  • DxAutocomplete
  • }
  • }
  • </script>
See Also