DevExtreme Vue - Configure Search Parameters
The Autocomplete can provide suggestions in two different modes: 'contains' (by default) and 'startswith'. You can use the searchMode option to change the mode.
jQuery
var autocompleteData = [ { country: "Afghanistan", capital: "Kabul" }, { country: "Albania", capital: "Tirana" }, // ... ]; $(function() { $("#autocompleteContainer").dxAutocomplete({ dataSource: autocompleteData, valueExpr: 'country', searchMode: 'startswith' }); });
Angular
<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 widget starts providing suggestions once an end user types the first character. To increase the number of characters that triggers suggestions, use the minSearchLength option.
jQuery
$(function() { $("#autocompleteContainer").dxAutocomplete({ // ... minSearchLength: 3 }); });
Angular
<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 widget should wait before providing suggestions. Assign this time interval measured in milliseconds to the searchTimeout option.
jQuery
$(function() { $("#autocompleteContainer").dxAutocomplete({ // ... searchTimeout: 500 }); });
Angular
<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
If you have technical questions, please create a support ticket in the DevExpress Support Center.