Help us shape the 2021 DevExtreme Roadmap.
Take our 5 minute survey.
Search and Editing
Set the searchEnabled option to true to allow users to search. The following options 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 widget should display the unfiltered item list until a user have typed in the minimum number of characters (minSearchLength).
Set the acceptCustomValue option to true to allow users to add values to the SelectBox. You should also implement the onCustomItemCreating handler to create new data source entries.
Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you!
We appreciate your feedback.
We appreciate your feedback.
$(function() {
var searchBox = $("#searchBox").dxSelectBox({
dataSource: products,
displayExpr: "Name",
searchEnabled: true
}).dxSelectBox("instance");
var productsDataSource = new DevExpress.data.DataSource({
store: {
data: simpleProducts,
type: "array",
key: "ID"
}
});
$("#editBox").dxSelectBox({
dataSource: productsDataSource,
displayExpr: "Name",
value: simpleProducts[0],
acceptCustomValue: true,
onValueChanged: function(data) {
var $result = $(".current-value");
if(data.value) {
$result.text(data.value.Name + " (ID: " + data.value.ID + ")");
} else {
$result.text("Not selected");
}
},
onCustomItemCreating: function(data) {
if(!data.text) {
data.customItem = null;
return;
}
var productIds = simpleProducts.map(function(item) {
return item.ID;
});
var incrementedId = Math.max.apply(null, productIds) + 1;
var newItem = {
Name: data.text,
ID: incrementedId
};
productsDataSource.store().insert(newItem);
productsDataSource.load();
data.customItem = newItem;
}
})
$("#searchModeOption").dxSelectBox({
items: ["contains", "startswith"],
value: "contains",
onValueChanged: function(e) {
searchBox.option("searchMode", e.value);
}
});
$("#searchExprOption").dxSelectBox({
items: [{
name: "'Name'",
value: "Name"
}, {
name: "['Name', 'Category']",
value: ['Name', 'Category']
}],
displayExpr: "name",
valueExpr: "value",
value: "Name",
onValueChanged: function(e) {
searchBox.option("searchExpr", e.value);
}
});
$("#searchTimeoutOption").dxNumberBox({
min: 0,
max: 5000,
value: 200,
showSpinButtons: true,
step: 100,
onValueChanged: function(e) {
searchBox.option("searchTimeout", e.value);
}
});
$("#minSearchLengthOption").dxNumberBox({
min: 0,
max: 5,
value: 0,
showSpinButtons: true,
onValueChanged: function(e) {
searchBox.option("minSearchLength", e.value);
}
});
$("#showDataBeforeSearchOption").dxCheckBox({
value: false,
text: "Show Data Before Search",
onValueChanged: function(e) {
searchBox.option("showDataBeforeSearch", e.value);
}
});
});
<!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/20.2.4/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.4/css/dx.light.css" />
<script src="https://cdn3.devexpress.com/jslib/20.2.4/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">
<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 id="searchBox"></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 id="editBox"></div>
</div>
</div>
<div class="dx-field current-product">
Current product:
<span class="current-value">
HD Video Player (ID: 0)
</span>
</div>
</div>
</div>
<div class="options">
<div class="caption">SearchBox Options</div>
<div class="option">
<div>Search Mode</div>
<div id="searchModeOption"></div>
</div>
<div class="option">
<div>Search Expression</div>
<div id="searchExprOption"></div>
</div>
<div class="option">
<div>Search Timeout</div>
<div id="searchTimeoutOption"></div>
</div>
<div class="option">
<div>Minimum Search Length</div>
<div id="minSearchLengthOption"></div>
</div>
<div class="option">
<div id="showDataBeforeSearchOption"></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;
}
var 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 }
];
var 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"
}];