Help us shape the 2021 DevExtreme Roadmap. Take our 5 minute survey.
Dismiss

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 option.

The SelectBox widget allows an end user to search through its items. This feature is disabled by default. To enable it, assign true to the searchEnabled option. Use the searchExpr option to specify which data fields should be searched. Assign an array of field names to this option if you need to search several fields.

jQuery
JavaScript
const selectBoxData = [
    { id: 1, country: "Afghanistan", capital: "Kabul" },
    { id: 2, country: "Albania", capital: "Tirana" },
    // ...
];

$(function() {
    $("#selectBoxContainer").dxSelectBox({
        dataSource: selectBoxData,
        valueExpr: 'id',
        displayExpr: 'country',
        searchEnabled: true,
        searchExpr: ['country', 'capital']
    });
});
Angular
HTML
TypeScript
<dx-select-box
    [dataSource]="selectBoxData"
    valueExpr="id"
    displayExpr="country"
    [searchEnabled]="true"
    [searchExpr]="['country', 'capital']">
</dx-select-box>
import { DxSelectBoxModule } from "devextreme-angular";
// ...
export class AppComponent {
    selectBoxData = [
        { id: 1, country: "Afghanistan", capital: "Kabul" },
        { id: 2, country: "Albania", capital: "Tirana" },
        // ...
    ];
}
@NgModule({
     imports: [
         // ...
         DxSelectBoxModule
     ],
     // ...
 })
Vue
App.vue
<template> 
    <DxSelectBox ...
        :data-source="selectBoxData"
        :search-enabled="true"
        :search-expr="['country', 'capital']"
        display-expr="country"
        value-expr="id"
    />
</template>

<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { DxSelectBox } from 'devextreme-vue/select-box';

export default {
    components: {
        DxSelectBox
    },
    data() {
        const selectBoxData = [
            { id: 1, country: "Afghanistan", capital: "Kabul" },
            { id: 2, country: "Albania", capital: "Tirana" },
            // ...
        ];
        return {
            selectBoxData
        }
    }
}
</script>
React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import SelectBox from 'devextreme-react/select-box';

const selectBoxData = [
    { id: 1, country: "Afghanistan", capital: "Kabul" },
    { id: 2, country: "Albania", capital: "Tirana" },
    // ...
];

class App extends React.Component {
    render() {
        return (
            <SelectBox ...
                dataSource={selectBoxData} 
                searchEnabled={true}
                searchExpr={['country', 'capital']}
                displayExpr="country"
                valueExpr="id"
            />
        );
    }
}
export default App;

View Demo

When a user types a string in the input field, the SelectBox suggests all items that contain this string. Assign 'startswith' to the searchMode option if you want the SelectBox to suggest only those items that start with the input string.

jQuery
JavaScript
const selectBoxData = [
    { id: 1, country: "Afghanistan", capital: "Kabul" },
    { id: 2, country: "Albania", capital: "Tirana" },
    // ...
];

$(function() {
    $("#selectBoxContainer").dxSelectBox({
        dataSource: selectBoxData,
        valueExpr: 'id',
        displayExpr: 'country',
        searchEnabled: true,
        searchExpr: 'country',
        searchMode: 'startswith'
    });
});
Angular
HTML
TypeScript
<dx-select-box
    [dataSource]="selectBoxData"
    valueExpr="id"
    displayExpr="country"
    [searchEnabled]="true"
    searchExpr="country"
    searchMode="startswith">
</dx-select-box>
import { DxSelectBoxModule } from "devextreme-angular";
// ...
export class AppComponent {
    selectBoxData = [
        { id: 1, country: "Afghanistan", capital: "Kabul" },
        { id: 2, country: "Albania", capital: "Tirana" },
        // ...
    ];
}
@NgModule({
     imports: [
         // ...
         DxSelectBoxModule
     ],
     // ...
 })
Vue
App.vue
<template> 
    <DxSelectBox ...
        :data-source="selectBoxData"
        :search-enabled="true"
        search-expr="country"
        display-expr="country"
        value-expr="id"
        search-mode="startswith"
    />
</template>

<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { DxSelectBox } from 'devextreme-vue/select-box';

export default {
    components: {
        DxSelectBox
    },
    data() {
        const selectBoxData = [
            { id: 1, country: "Afghanistan", capital: "Kabul" },
            { id: 2, country: "Albania", capital: "Tirana" },
            // ...
        ];
        return {
            selectBoxData
        }
    }
}
</script>
React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import SelectBox from 'devextreme-react/select-box';

const selectBoxData = [
    { id: 1, country: "Afghanistan", capital: "Kabul" },
    { id: 2, country: "Albania", capital: "Tirana" },
    // ...
];

class App extends React.Component {
    render() {
        return (
            <SelectBox ...
                dataSource={selectBoxData} 
                searchEnabled={true}
                searchExpr="country"
                displayExpr="country"
                valueExpr="id"
                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 option. The delay is measured in milliseconds.

jQuery
JavaScript
const selectBoxData = [
    { id: 1, country: "Afghanistan", capital: "Kabul" },
    { id: 2, country: "Albania", capital: "Tirana" },
    // ...
];

$(function() {
    $("#selectBoxContainer").dxSelectBox({
        dataSource: selectBoxData,
        valueExpr: 'id',
        displayExpr: 'country',
        searchEnabled: true,
        searchExpr: 'country',
        searchTimeout: 1000
    });
});
Angular
HTML
TypeScript
<dx-select-box
    [dataSource]="selectBoxData"
    valueExpr="id"
    displayExpr="country"
    [searchEnabled]="true"
    searchExpr="country"
    [searchTimeout]="1000">
</dx-select-box>
import { DxSelectBoxModule } from "devextreme-angular";
// ...
export class AppComponent {
    selectBoxData = [
        { id: 1, country: "Afghanistan", capital: "Kabul" },
        { id: 2, country: "Albania", capital: "Tirana" },
        // ...
    ];
}
@NgModule({
     imports: [
         // ...
         DxSelectBoxModule
     ],
     // ...
 })
Vue
App.vue
<template> 
    <DxSelectBox ...
        :data-source="selectBoxData"
        :search-enabled="true"
        :search-timeout="1000"
        search-expr="country"
        display-expr="country"
        value-expr="id"
    />
</template>

<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { DxSelectBox } from 'devextreme-vue/select-box';

export default {
    components: {
        DxSelectBox
    },
    data() {
        const selectBoxData = [
            { id: 1, country: "Afghanistan", capital: "Kabul" },
            { id: 2, country: "Albania", capital: "Tirana" },
            // ...
        ];
        return {
            selectBoxData
        }
    }
}
</script>
React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import SelectBox from 'devextreme-react/select-box';

const selectBoxData = [
    { id: 1, country: "Afghanistan", capital: "Kabul" },
    { id: 2, country: "Albania", capital: "Tirana" },
    // ...
];

class App extends React.Component {
    render() {
        return (
            <SelectBox ...
                dataSource={selectBoxData} 
                searchEnabled={true}
                searchTimeout={1000}
                searchExpr="country"
                displayExpr="country"
                valueExpr="id"
            />
        );
    }
}
export default App;

The SelectBox widget starts searching after a user has typed at least one character by default. Use the minSearchLength option to increase the number of characters that triggers the search.

jQuery
JavaScript
const selectBoxData = [
    { id: 1, country: "Afghanistan", capital: "Kabul" },
    // ...
];

$(function() {
    $("#selectBoxContainer").dxSelectBox({
        dataSource: selectBoxData,
        valueExpr: 'id',
        displayExpr: 'country',
        searchEnabled: true,
        searchExpr: "country",
        minSearchLength: 3
    });
});
Angular
HTML
TypeScript
<dx-select-box
    [dataSource]="selectBoxData"
    valueExpr="id"
    displayExpr="country"
    [searchEnabled]="true"
    searchExpr="country"
    [minSearchLength]="3">
</dx-select-box>
import { DxSelectBoxModule } from "devextreme-angular";
// ...
export class AppComponent {
    selectBoxData = [
        { id: 1, country: "Afghanistan", capital: "Kabul" },
        // ...
    ];
}
@NgModule({
     imports: [
         // ...
         DxSelectBoxModule
     ],
     // ...
 })
Vue
App.vue
<template> 
    <DxSelectBox ...
        :data-source="selectBoxData"
        :search-enabled="true"
        :min-search-length="3"
        search-expr="country"
        display-expr="country"
        value-expr="id"
    />
</template>

<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { DxSelectBox } from 'devextreme-vue/select-box';

export default {
    components: {
        DxSelectBox
    },
    data() {
        const selectBoxData = [
            { id: 1, country: "Afghanistan", capital: "Kabul" },
            // ...
        ];
        return {
            selectBoxData
        }
    }
}
</script>
React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import SelectBox from 'devextreme-react/select-box';

const selectBoxData = [
    { id: 1, country: "Afghanistan", capital: "Kabul" },
    // ...
];

class App extends React.Component {
    render() {
        return (
            <SelectBox ...
                dataSource={selectBoxData} 
                searchEnabled={true}
                minSearchLength={3}
                searchExpr="country"
                displayExpr="country"
                valueExpr="id"
            />
        );
    }
}
export default App;
See Also