Free Trial Buy
    Your search did not match any results.
    Select Box

    Search and Editing

    Set the searchEnabled property to true to allow users to search. The following properties help you configure the feature:

    • searchExpr
      Specifies one or several data fields to search.
    • searchMode
      Specifies whether found items should contain the typed-in string or start with it.
    • searchTimeout
      Specifies the delay between the moment a user stops typing and the moment the search is executed.
    • minSearchLength
      Specifies the minimum number of characters that a user should type in to trigger the search.
    • showDataBeforeSearch
      Specifies whether the SelectBox should display the unfiltered item list until a user have typed in the minimum number of characters (minSearchLength).

    Set the acceptCustomValue property to true to allow users to add values to the SelectBox. You should also implement the onCustomItemCreating handler to create new data source entries.

    See more Hide details
    Prev Demo Next Demo

    jQuery

    Angular

    Vue

    React

    AngularJS

    ASP.NET Core

    ASP.NET MVC

    Backend API
    Copy to CodePen
    Apply
    Reset
    const DemoApp = angular.module('DemoApp', ['dx']); DemoApp.controller('DemoController', ($scope) => { $scope.currentProduct = simpleProducts[0]; $scope.productsDataSource = new DevExpress.data.DataSource({ store: { data: simpleProducts, type: 'array', key: 'ID', }, }); $scope.searchModeOption = 'contains'; $scope.searchExprOption = 'Name'; $scope.searchTimeoutOption = 200; $scope.minSearchLengthOption = 0; $scope.showDataBeforeSearchOption = false; $scope.searchExprItems = [{ name: "'Name'", value: 'Name', }, { name: "['Name', 'Category']", value: ['Name', 'Category'], }]; $scope.selectBox = { searchBoxOptions: { dataSource: products, displayExpr: 'Name', valueExpr: 'ID', searchEnabled: true, bindingOptions: { searchMode: 'searchModeOption', searchExpr: 'searchExprOption', searchTimeout: 'searchTimeoutOption', minSearchLength: 'minSearchLengthOption', showDataBeforeSearch: 'showDataBeforeSearchOption', }, }, editBoxOptions: { acceptCustomValue: true, dataSource: $scope.productsDataSource, displayExpr: 'Name', valueExpr: 'ID', value: simpleProducts[0].ID, bindingOptions: { selectedItem: 'currentProduct', }, onCustomItemCreating(data) { if (!data.text) { data.customItem = null; return; } const productIds = simpleProducts.map((item) => item.ID); const incrementedId = Math.max.apply(null, productIds) + 1; const newItem = { Name: data.text, ID: incrementedId, }; data.customItem = $scope.productsDataSource.store().insert(newItem) .then(() => $scope.productsDataSource.load()) .then(() => newItem) .catch((error) => { throw error; }); }, }, }; $scope.demoOptions = { searchModeOptions: { items: ['contains', 'startswith'], bindingOptions: { value: 'searchModeOption', }, }, searchExprOptions: { items: $scope.searchExprItems, displayExpr: 'name', valueExpr: 'value', bindingOptions: { value: 'searchExprOption', }, }, searchTimeoutOptions: { min: 0, max: 5000, value: 200, showSpinButtons: true, step: 100, bindingOptions: { value: 'searchTimeoutOption', }, }, minSearchLengthOptions: { min: 0, max: 5, value: 0, showSpinButtons: true, bindingOptions: { value: 'minSearchLengthOption', }, }, showDataBeforeSearchOptions: { value: false, text: 'Show Data Before Search', bindingOptions: { value: 'showDataBeforeSearchOption', }, }, }; });
    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/22.2.3/css/dx.light.css" /> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script> <script>window.angular || document.write(decodeURIComponent('%3Cscript src="js/angular.min.js"%3E%3C/script%3E'))</script> <script src="https://cdn3.devexpress.com/jslib/22.2.3/js/dx.all.js"></script> <script src="data.js"></script> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="index.js"></script> </head> <body class="dx-viewport"> <div class="demo-container" ng-app="DemoApp" ng-controller="DemoController"> <div id="selectbox-demo"> <div class="widget-container"> <div class="dx-fieldset"> <div class="dx-fieldset-header">SearchBox</div> <div class="dx-field"> <div class="dx-field-label">Product</div> <div class="dx-field-value"> <div dx-select-box="selectBox.searchBoxOptions"></div> </div> </div> </div> <div class="dx-fieldset"> <div class="dx-fieldset-header">EditBox</div> <div class="dx-field"> <div class="dx-field-label">Product</div> <div class="dx-field-value"> <div dx-select-box="selectBox.editBoxOptions"></div> </div> </div> <div class="dx-field current-product"> Current product: <span ng-if="currentProduct" class="current-value"> {{currentProduct.Name}} (ID: {{currentProduct.ID}}) </span> <span ng-if="!currentProduct" class="current-value"> Not selected </span> </div> </div> </div> <div class="options"> <div class="caption">SearchBox Options</div> <div class="option"> <div>Search Mode</div> <div dx-select-box="demoOptions.searchModeOptions"></div> </div> <div class="option"> <div>Search Expression</div> <div dx-select-box="demoOptions.searchExprOptions"></div> </div> <div class="option"> <div>Search Timeout</div> <div dx-number-box="demoOptions.searchTimeoutOptions"></div> </div> <div class="option"> <div>Minimum Search Length</div> <div dx-number-box="demoOptions.minSearchLengthOptions"></div> </div> <div class="option"> <div dx-check-box="demoOptions.showDataBeforeSearchOptions"></div> </div> </div> </div> </div> </body> </html>
    .widget-container { margin-right: 320px; } .current-product { padding-top: 11px; } .current-value { font-weight: bold; } .options { padding: 20px; background-color: rgba(191, 191, 191, 0.15); position: absolute; right: 0; top: 0; bottom: 0; width: 260px; } .caption { font-weight: 500; font-size: 18px; } .option { margin-top: 10px; }
    const simpleProducts = [ { Name: 'HD Video Player', ID: 0 }, { Name: 'SuperHD Video Player', ID: 1 }, { Name: 'SuperPlasma 50', ID: 2 }, { Name: 'SuperLED 50', ID: 3 }, { Name: 'SuperLED 42', ID: 4 }, { Name: 'SuperLCD 55', ID: 5 }, { Name: 'SuperLCD 42', ID: 6 }, { Name: 'SuperPlasma 65', ID: 7 }, { Name: 'SuperLCD 70', ID: 8 }, { Name: 'Projector Plus', ID: 9 }, { Name: 'Projector PlusHT', ID: 10 }, { Name: 'ExcelRemote IR', ID: 11 }, { Name: 'ExcelRemote Bluetooth', ID: 12 }, { Name: 'ExcelRemote IP', ID: 13 }, ]; const products = [{ ID: 1, Name: 'HD Video Player', Price: 330, Current_Inventory: 225, Backorder: 0, Manufacturing: 10, Category: 'Video Players', ImageSrc: '../../../../images/products/1.png', }, { ID: 2, Name: 'SuperHD Video Player', Price: 400, Current_Inventory: 150, Backorder: 0, Manufacturing: 25, Category: 'Video Players', ImageSrc: '../../../../images/products/2.png', }, { ID: 3, Name: 'SuperPlasma 50', Price: 2400, Current_Inventory: 0, Backorder: 0, Manufacturing: 0, Category: 'Televisions', ImageSrc: '../../../../images/products/3.png', }, { ID: 4, Name: 'SuperLED 50', Price: 1600, Current_Inventory: 77, Backorder: 0, Manufacturing: 55, Category: 'Televisions', ImageSrc: '../../../../images/products/4.png', }, { ID: 5, Name: 'SuperLED 42', Price: 1450, Current_Inventory: 445, Backorder: 0, Manufacturing: 0, Category: 'Televisions', ImageSrc: '../../../../images/products/5.png', }, { ID: 6, Name: 'SuperLCD 55', Price: 1350, Current_Inventory: 345, Backorder: 0, Manufacturing: 5, Category: 'Televisions', ImageSrc: '../../../../images/products/6.png', }, { ID: 7, Name: 'SuperLCD 42', Price: 1200, Current_Inventory: 210, Backorder: 0, Manufacturing: 20, Category: 'Televisions', ImageSrc: '../../../../images/products/7.png', }, { ID: 8, Name: 'SuperPlasma 65', Price: 3500, Current_Inventory: 0, Backorder: 0, Manufacturing: 0, Category: 'Televisions', ImageSrc: '../../../../images/products/8.png', }, { ID: 9, Name: 'SuperLCD 70', Price: 4000, Current_Inventory: 95, Backorder: 0, Manufacturing: 5, Category: 'Televisions', ImageSrc: '../../../../images/products/9.png', }, { ID: 10, Name: 'DesktopLED 21', Price: 175, Current_Inventory: null, Backorder: 425, Manufacturing: 75, Category: 'Monitors', ImageSrc: '../../../../images/products/10.png', }, { ID: 12, Name: 'DesktopLCD 21', Price: 170, Current_Inventory: 210, Backorder: 0, Manufacturing: 60, Category: 'Monitors', ImageSrc: '../../../../images/products/12.png', }, { ID: 13, Name: 'DesktopLCD 19', Price: 160, Current_Inventory: 150, Backorder: 0, Manufacturing: 210, Category: 'Monitors', ImageSrc: '../../../../images/products/13.png', }, { ID: 14, Name: 'Projector Plus', Price: 550, Current_Inventory: null, Backorder: 55, Manufacturing: 10, Category: 'Projectors', ImageSrc: '../../../../images/products/14.png', }, { ID: 15, Name: 'Projector PlusHD', Price: 750, Current_Inventory: 110, Backorder: 0, Manufacturing: 90, Category: 'Projectors', ImageSrc: '../../../../images/products/15.png', }, { ID: 16, Name: 'Projector PlusHT', Price: 1050, Current_Inventory: 0, Backorder: 75, Manufacturing: 57, Category: 'Projectors', ImageSrc: '../../../../images/products/16.png', }, { ID: 17, Name: 'ExcelRemote IR', Price: 150, Current_Inventory: 650, Backorder: 0, Manufacturing: 190, Category: 'Automation', ImageSrc: '../../../../images/products/17.png', }, { ID: 18, Name: 'ExcelRemote Bluetooth', Price: 180, Current_Inventory: 310, Backorder: 0, Manufacturing: 0, Category: 'Automation', ImageSrc: '../../../../images/products/18.png', }, { ID: 19, Name: 'ExcelRemote IP', Price: 200, Current_Inventory: 0, Backorder: 325, Manufacturing: 225, Category: 'Automation', ImageSrc: '../../../../images/products/19.png', }];