Configure Search Parameters
NOTE
Searching works when inputting a plain data structure only. However, if you need the searching capability and hierarchical data, transform the plain data using the DataSource's group property.
The TagBox UI component allows an end user to search through its items. This feature is disabled by default. To enable it, assign true to the searchEnabled property. Use the searchExpr property to specify which data fields should be searched. Assign an array of field names to this property if you need to search several fields.
jQuery
JavaScript
const tagBoxData = [
{ id: 1, country: "Afghanistan", capital: "Kabul" },
{ id: 2, country: "Albania", capital: "Tirana" },
// ...
];
$(function() {
$("#tagBoxContainer").dxTagBox({
dataSource: tagBoxData,
valueExpr: 'id',
displayExpr: 'country',
searchEnabled: true,
searchExpr: ['capital', 'country']
});
});Angular
HTML
TypeScript
<dx-tag-box
[dataSource]="tagBoxData"
valueExpr="id"
displayExpr="country"
[searchEnabled]="true"
[searchExpr]="['country', 'capital']">
</dx-tag-box>
import { DxTagBoxModule } from "devextreme-angular";
// ...
export class AppComponent {
tagBoxData = [
{ id: 1, country: "Afghanistan", capital: "Kabul" },
{ id: 2, country: "Albania", capital: "Tirana" },
// ...
];
}
@NgModule({
imports: [
// ...
DxTagBoxModule
],
// ...
})Vue
<template>
<DxTagBox
:data-source="tagBoxData"
:search-enabled="true"
:search-expr="searchExpr"
value-expr="id"
display-expr="country"
/>
</template>
<script>
import 'devextreme/dist/css/dx.light.css';
import { DxTagBox } from 'devextreme-vue/tag-box';
export default {
components: {
DxTagBox
},
data() {
return {
tagBoxData: [
{ id: 1, country: 'Afghanistan', capital: 'Kabul' },
{ id: 2, country: 'Albania', capital: 'Tirana' },
// ...
],
searchExpr: ['capital', 'country']
};
}
}
</script>React
import React from 'react';
import 'devextreme/dist/css/dx.light.css';
import { TagBox } from 'devextreme-react/tag-box';
const tagBoxData = [
{ id: 1, country: 'Afghanistan', capital: 'Kabul' },
{ id: 2, country: 'Albania', capital: 'Tirana' },
// ...
];
const searchExpr = ['capital', 'country'];
class App extends React.Component {
render() {
return (
<TagBox
dataSource={tagBoxData}
searchEnabled={true}
searchExpr={searchExpr}
valueExpr="id"
displayExpr="country"
/>
);
}
}
export default App;When a user types a string in the input field, the TagBox suggests all items that contain this string. Assign 'startswith' to the searchMode property if you want the TagBox to suggest only those items that start with the input string.
jQuery
JavaScript
$(function() {
$("#tagBoxContainer").dxTagBox({
dataSource: tagBoxData,
valueExpr: 'id',
displayExpr: 'country',
searchEnabled: true,
searchExpr: 'country',
searchMode: 'startswith'
});
});Angular
HTML
TypeScript
<dx-tag-box
[dataSource]="tagBoxData"
valueExpr="id"
displayExpr="country"
[searchEnabled]="true"
searchExpr="country"
searchMode="startswith">
</dx-tag-box>
import { DxTagBoxModule } from "devextreme-angular";
// ...
export class AppComponent {
tagBoxData = [
{ id: 1, country: "Afghanistan", capital: "Kabul" },
{ id: 2, country: "Albania", capital: "Tirana" },
// ...
];
}
@NgModule({
imports: [
// ...
DxTagBoxModule
],
// ...
})Vue
<template>
<DxTagBox
:data-source="tagBoxData"
:search-enabled="true"
value-expr="id"
display-expr="country"
search-expr="country"
search-mode="startswith"
/>
</template>
<script>
import 'devextreme/dist/css/dx.light.css';
import { DxTagBox } from 'devextreme-vue/tag-box';
export default {
components: {
DxTagBox
},
data() {
return {
tagBoxData: [
{ id: 1, country: 'Afghanistan', capital: 'Kabul' },
{ id: 2, country: 'Albania', capital: 'Tirana' },
// ...
]
};
}
}
</script>React
import React from 'react';
import 'devextreme/dist/css/dx.light.css';
import { TagBox } from 'devextreme-react/tag-box';
const tagBoxData = [
{ id: 1, country: 'Afghanistan', capital: 'Kabul' },
{ id: 2, country: 'Albania', capital: 'Tirana' },
// ...
];
class App extends React.Component {
render() {
return (
<TagBox
dataSource={tagBoxData}
searchEnabled={true}
valueExpr="id"
displayExpr="country"
searchExpr="country"
searchMode="startswith"
/>
);
}
}
export default App;There is a delay between the moment a user finishes typing and the moment the search is executed. To increase or descrease it, use the searchTimeout property. The delay is measured in milliseconds.
jQuery
JavaScript
$(function() {
$("#tagBoxContainer").dxTagBox({
dataSource: tagBoxData,
valueExpr: 'id',
displayExpr: 'country',
searchEnabled: true,
searchExpr: 'country',
searchTimeout: 1000
});
});Angular
HTML
TypeScript
<dx-tag-box
[dataSource]="tagBoxData"
valueExpr="id"
displayExpr="country"
[searchEnabled]="true"
searchExpr="country"
[searchTimeout]="1000">
</dx-tag-box>
import { DxTagBoxModule } from "devextreme-angular";
// ...
export class AppComponent {
tagBoxData = [
{ id: 1, country: "Afghanistan", capital: "Kabul" },
{ id: 2, country: "Albania", capital: "Tirana" },
// ...
];
}
@NgModule({
imports: [
// ...
DxTagBoxModule
],
// ...
})Vue
<template>
<DxTagBox
:data-source="tagBoxData"
:search-enabled="true"
:search-timeout="1000"
value-expr="id"
display-expr="country"
search-expr="country"
/>
</template>
<script>
import 'devextreme/dist/css/dx.light.css';
import { DxTagBox } from 'devextreme-vue/tag-box';
export default {
components: {
DxTagBox
},
data() {
return {
tagBoxData: [
{ id: 1, country: 'Afghanistan', capital: 'Kabul' },
{ id: 2, country: 'Albania', capital: 'Tirana' },
// ...
]
};
}
}
</script>React
import React from 'react';
import 'devextreme/dist/css/dx.light.css';
import { TagBox } from 'devextreme-react/tag-box';
const tagBoxData = [
{ id: 1, country: 'Afghanistan', capital: 'Kabul' },
{ id: 2, country: 'Albania', capital: 'Tirana' },
// ...
];
class App extends React.Component {
render() {
return (
<TagBox
dataSource={tagBoxData}
searchEnabled={true}
searchTimeout={1000}
valueExpr="id"
displayExpr="country"
searchExpr="country"
/>
);
}
}
export default App;The TagBox UI component starts searching after a user has typed at least one character by default. Use the minSearchLength property to increase the number of characters that triggers the search.
jQuery
JavaScript
$(function() {
$("#tagBoxContainer").dxTagBox({
dataSource: tagBoxData,
valueExpr: 'id',
displayExpr: 'country',
searchEnabled: true,
searchExpr: "country",
minSearchLength: 3
});
});Angular
HTML
TypeScript
<dx-tag-box
[dataSource]="tagBoxData"
valueExpr="id"
displayExpr="country"
[searchEnabled]="true"
searchExpr="country"
[minSearchLength]="3">
</dx-tag-box>
import { DxTagBoxModule } from "devextreme-angular";
// ...
export class AppComponent {
tagBoxData = [
{ id: 1, country: "Afghanistan", capital: "Kabul" },
// ...
];
}
@NgModule({
imports: [
// ...
DxTagBoxModule
],
// ...
})Vue
<template>
<DxTagBox
:data-source="tagBoxData"
:search-enabled="true"
:min-search-length="3"
value-expr="id"
display-expr="country"
search-expr="country"
/>
</template>
<script>
import 'devextreme/dist/css/dx.light.css';
import { DxTagBox } from 'devextreme-vue/tag-box';
export default {
components: {
DxTagBox
},
data() {
return {
tagBoxData: [
{ id: 1, country: 'Afghanistan', capital: 'Kabul' },
// ...
]
};
}
}
</script>React
import React from 'react';
import 'devextreme/dist/css/dx.light.css';
import { TagBox } from 'devextreme-react/tag-box';
const tagBoxData = [
{ id: 1, country: 'Afghanistan', capital: 'Kabul' },
// ...
];
class App extends React.Component {
render() {
return (
<TagBox
dataSource={tagBoxData}
searchEnabled={true}
minSearchLength={3}
valueExpr="id"
displayExpr="country"
searchExpr="country"
/>
);
}
}
export default App;See Also
Feedback