Your search did not match any results.
Select Box

Search and Editing

Documentation

The SelectBox widget allows an end user to search through its items or even add custom ones.

Copy to CodeSandBox
Apply
Reset
import React from 'react'; import { SelectBox } from 'devextreme-react/select-box'; import { simpleProducts, products } from './data.js'; class App extends React.Component { constructor() { super(); this.state = { editBoxValue: simpleProducts[0] }; this.valueChanged = ({ value }) => this.setState({ editBoxValue: value }); } customItemCreating(args) { const item = args.text; const dataSource = args.component.getDataSource(); args.customItem = item || ''; if(item) { dataSource .store() .load({ filter: ['this', '=', item] }) .done((items) => { if(!items.length) { dataSource.store().insert(item); dataSource.reload(); } }); } } render() { return ( <div> <div className={'dx-fieldset'}> <div className={'dx-fieldset-header'}>SearchBox mode</div> <div className={'dx-field'}> <div className={'dx-field-label'}>Product</div> <div className={'dx-field-value'}> <SelectBox displayExpr={'Name'} valueExpr={'ID'} searchEnabled={true} items={products} /> </div> </div> </div> <div className={'dx-fieldset'}> <div className={'dx-fieldset-header'}>EditBox mode</div> <div className={'dx-field'}> <div className={'dx-field-label'}>Product</div> <div className={'dx-field-value'}> <SelectBox acceptCustomValue={true} defaultValue={this.state.editBoxValue} items={simpleProducts} onCustomItemCreating={this.customItemCreating} onValueChanged={this.valueChanged} /> </div> </div> <div className={'dx-field current-product'}> Current product is <span className={'current-value'}>{this.state.editBoxValue}</span> </div> </div> </div> ); } } export default App;
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.js'; ReactDOM.render( <App />, document.getElementById('app') );
<!DOCTYPE html> <html> <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" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/18.2.7/css/dx.common.css" /> <link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/18.2.7/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" /> <link rel="stylesheet" type ="text/css" href ="styles.css" /> <script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script> <script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import('./index.js'); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"></div> </div> </body> </html>
.current-product { padding-top: 11px; } .current-value { font-weight: bold; }
export const simpleProducts = [ 'HD Video Player', 'SuperHD Video Player', 'SuperPlasma 50', 'SuperLED 50', 'SuperLED 42', 'SuperLCD 55', 'SuperLCD 42', 'SuperPlasma 65', 'SuperLCD 70', 'Projector Plus', 'Projector PlusHT', 'ExcelRemote IR', 'ExcelRemote Bluetooth', 'ExcelRemote IP' ]; export 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' }];
System.config({ transpiler: 'plugin-babel', paths: { 'npm:': 'https://unpkg.com/' }, defaultExtension: 'js', map: { 'react': 'npm:react@16/umd/react.development.js', 'react-dom': 'npm:react-dom@16/umd/react-dom.development.js', 'prop-types': 'npm:prop-types/prop-types.js', 'devextreme': 'npm:devextreme@18.2', 'devextreme-react': 'npm:devextreme-react@18.2', 'jszip': 'npm:jszip@3.1.3/dist/jszip.min.js', 'quill': 'npm:quill@1.3.6/dist/quill.js', // SystemJS plugins 'plugin-babel': 'npm:systemjs-plugin-babel@0/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel@0/systemjs-babel-browser.js' }, packages: { 'devextreme': { defaultExtension: 'js' }, 'devextreme-react': { main: 'index.js' } }, babelOptions: { sourceMaps: false, stage0: true, react: true } });