DevExtreme v23.2 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Your search did not match any results.

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.

Backend API
<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"> <dx-select-box [dataSource]="products" displayExpr="Name" valueExpr="ID" [inputAttr]="{ 'aria-label': 'Product' }" [searchMode]="searchModeOption" [searchExpr]="searchExprOption" [searchTimeout]="searchTimeoutOption" [minSearchLength]="minSearchLengthOption" [searchEnabled]="true" [showDataBeforeSearch]="showDataBeforeSearchOption" ></dx-select-box> </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"> <dx-select-box #selectBox [dataSource]="productsDataSource" [inputAttr]="{ 'aria-label': 'Custom Product' }" [acceptCustomValue]="true" displayExpr="Name" valueExpr="ID" [value]="product" (onCustomItemCreating)="addCustomItem($event)" ></dx-select-box> </div> </div> <div class="dx-field current-product"> Current product: <span *ngIf="selectBox.selectedItem; else emptyValue" class="current-value" > {{ selectBox.selectedItem.Name }} (ID: {{ selectBox.selectedItem.ID }}) </span> <ng-template #emptyValue> <span class="current-value">Not selected</span> </ng-template> </div> </div> </div> <div class="options"> <div class="caption">SearchBox Options</div> <div class="option"> <div>Search Mode</div> <dx-select-box [items]="['contains', 'startswith']" [inputAttr]="{ 'aria-label': 'Search Mode' }" [(value)]="searchModeOption" ></dx-select-box> </div> <div class="option"> <div>Search Expression</div> <dx-select-box [items]="searchExprOptionItems" displayExpr="name" [inputAttr]="{ 'aria-label': 'Search Expression' }" valueExpr="value" [(value)]="searchExprOption" ></dx-select-box> </div> <div class="option"> <div>Search Timeout</div> <dx-number-box [min]="0" [max]="5000" [(value)]="searchTimeoutOption" [showSpinButtons]="true" [step]="100" [inputAttr]="{ 'aria-label': 'Search Timeout' }" ></dx-number-box> </div> <div class="option"> <div>Minimum Search Length</div> <dx-number-box [min]="0" [max]="5" [(value)]="minSearchLengthOption" [showSpinButtons]="true" [inputAttr]="{ 'aria-label': 'Minimum Search Length' }" ></dx-number-box> </div> <div class="option"> <dx-check-box [(value)]="showDataBeforeSearchOption" text="Show Data Before Search" ></dx-check-box> </div> </div> </div>
import { NgModule, Component, enableProdMode } from '@angular/core'; import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { DxNumberBoxModule, DxCheckBoxModule, DxSelectBoxModule } from 'devextreme-angular'; import DataSource from 'devextreme/data/data_source'; import { DxSelectBoxTypes } from 'devextreme-angular/ui/select-box'; import { Product, Service, SimpleProduct } from './app.service'; if (!/localhost/.test(document.location.host)) { enableProdMode(); } @Component({ selector: 'demo-app', templateUrl: 'app/app.component.html', styleUrls: ['app/app.component.css'], providers: [Service], }) export class AppComponent { products: Product[]; simpleProducts: SimpleProduct[]; productsDataSource: DataSource; product: number; searchModeOption = 'contains'; searchExprOption = 'Name'; searchTimeoutOption = 200; minSearchLengthOption = 0; showDataBeforeSearchOption = false; searchExprOptionItems = [{ name: "'Name'", value: 'Name', }, { name: "['Name', 'Category']", value: ['Name', 'Category'], }]; constructor(service: Service) { this.products = service.getProducts(); this.simpleProducts = service.getSimpleProducts(); this.product = this.simpleProducts[0].ID; this.productsDataSource = new DataSource({ store: { data: this.simpleProducts, type: 'array', key: 'ID', }, }); } addCustomItem(data: DxSelectBoxTypes.CustomItemCreatingEvent) { if (!data.text) { data.customItem = null; return; } const productIds = this.simpleProducts.map((item) => item.ID); const incrementedId = Math.max.apply(null, productIds) + 1; const newItem = { Name: data.text, ID: incrementedId, }; data.customItem = this.productsDataSource.store().insert(newItem) .then(() => this.productsDataSource.load()) .then(() => newItem) .catch((error) => { throw error; }); } } @NgModule({ imports: [ BrowserModule, BrowserTransferStateModule, DxSelectBoxModule, DxNumberBoxModule, DxCheckBoxModule, ], declarations: [AppComponent], bootstrap: [AppComponent], }) export class AppModule { } platformBrowserDynamic().bootstrapModule(AppModule);
::ng-deep .widget-container { margin-right: 320px; } ::ng-deep .current-product { padding-top: 11px; } ::ng-deep .current-value { font-weight: bold; } ::ng-deep .options { padding: 20px; background-color: rgba(191, 191, 191, 0.15); position: absolute; right: 0; top: 0; bottom: 0; width: 260px; } ::ng-deep .caption { font-weight: 500; font-size: 18px; } ::ng-deep .option { margin-top: 10px; }
import { Injectable } from '@angular/core'; export class Product { ID: number; Name: string; Price: number; Current_Inventory: number; Backorder: number; Manufacturing: number; Category: string; ImageSrc: string; } export class SimpleProduct { Name: string; ID: number; } const simpleProducts:SimpleProduct[] = [ { 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: Product[] = [{ 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', }]; @Injectable() export class Service { getSimpleProducts(): SimpleProduct[] { return simpleProducts; } getProducts(): Product[] { return products; } }
// In real applications, you should not transpile code in the browser. // You can see how to create your own application with Angular and DevExtreme here: // https://js.devexpress.com/Documentation/Guide/Angular_Components/Getting_Started/Create_a_DevExtreme_Application/ window.exports = window.exports || {}; window.config = { transpiler: 'ts', typescriptOptions: { module: 'system', emitDecoratorMetadata: true, experimentalDecorators: true, }, meta: { 'typescript': { 'exports': 'ts', }, 'devextreme/time_zone_utils.js': { 'esModule': true, }, 'devextreme/localization.js': { 'esModule': true, }, 'devextreme/viz/palette.js': { 'esModule': true, }, }, paths: { 'npm:': 'https://unpkg.com/', }, map: { 'ts': 'npm:plugin-typescript@4.2.4/lib/plugin.js', 'typescript': 'npm:typescript@4.2.4/lib/typescript.js', '@angular/core': 'npm:@angular/core@12.2.17', '@angular/platform-browser': 'npm:@angular/platform-browser@12.2.17', '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic@12.2.17', '@angular/forms': 'npm:@angular/forms@12.2.17', '@angular/common': 'npm:@angular/common@12.2.17', '@angular/compiler': 'npm:@angular/compiler@12.2.17', 'tslib': 'npm:tslib@2.6.2/tslib.js', 'rxjs': 'npm:rxjs@7.5.3/dist/bundles/rxjs.umd.js', 'rxjs/operators': 'npm:rxjs@7.5.3/dist/cjs/operators/index.js', 'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js', 'luxon': 'npm:luxon@1.28.1/build/global/luxon.min.js', 'es6-object-assign': 'npm:es6-object-assign@1.1.0', 'devextreme': 'npm:devextreme@23.2.5/cjs', 'devextreme/bundles/dx.all': 'npm:devextreme@23.2.5/bundles/dx.all.js', 'jszip': 'npm:jszip@3.10.1/dist/jszip.min.js', 'devextreme-quill': 'npm:devextreme-quill@1.6.4/dist/dx-quill.min.js', 'devexpress-diagram': 'npm:devexpress-diagram@2.2.5', 'devexpress-gantt': 'npm:devexpress-gantt@4.1.51', 'devextreme-angular': 'npm:devextreme-angular@23.2.5', '@devextreme/runtime': 'npm:@devextreme/runtime@3.0.12', 'inferno': 'npm:inferno@7.4.11/dist/inferno.min.js', 'inferno-compat': 'npm:inferno-compat/dist/inferno-compat.min.js', 'inferno-create-element': 'npm:inferno-create-element@7.4.11/dist/inferno-create-element.min.js', 'inferno-dom': 'npm:inferno-dom/dist/inferno-dom.min.js', 'inferno-hydrate': 'npm:inferno-hydrate@7.4.11/dist/inferno-hydrate.min.js', 'inferno-clone-vnode': 'npm:inferno-clone-vnode/dist/inferno-clone-vnode.min.js', 'inferno-create-class': 'npm:inferno-create-class/dist/inferno-create-class.min.js', 'inferno-extras': 'npm:inferno-extras/dist/inferno-extras.min.js', // Prettier 'prettier/standalone': 'npm:prettier@2.8.4/standalone.js', 'prettier/parser-html': 'npm:prettier@2.8.4/parser-html.js', }, packages: { 'app': { main: './app.component.ts', defaultExtension: 'ts', }, 'devextreme': { defaultExtension: 'js', }, 'devextreme/events/utils': { main: 'index', }, 'devextreme/events': { main: 'index', }, 'es6-object-assign': { main: './index.js', defaultExtension: 'js', }, 'rxjs': { defaultExtension: 'js', }, 'rxjs/operators': { defaultExtension: 'js', }, }, packageConfigPaths: [ 'npm:@devextreme/*/package.json', 'npm:@devextreme/runtime@3.0.12/inferno/package.json', 'npm:@angular/*/package.json', 'npm:@angular/common@12.2.17/*/package.json', 'npm:rxjs@7.5.3/package.json', 'npm:rxjs@7.5.3/operators/package.json', 'npm:devextreme-angular@23.2.5/*/package.json', 'npm:devextreme-angular@23.2.5/ui/*/package.json', 'npm:devextreme-angular@23.2.5/package.json', 'npm:devexpress-diagram@2.2.5/package.json', 'npm:devexpress-gantt@4.1.51/package.json', ], }; System.config(window.config);
<!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" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/23.2.5/css/dx.light.css" /> <script src="https://unpkg.com/core-js@2.6.12/client/shim.min.js"></script> <script src="https://unpkg.com/zone.js@0.12.0/dist/zone.js"></script> <script src="https://unpkg.com/reflect-metadata@0.1.13/Reflect.js"></script> <script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script> <script src="config.js"></script> <script> System.import("app").catch(console.error.bind(console)); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <demo-app>Loading...</demo-app> </div> </body> </html>