Your search did not match any results.
Select Box

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.

@model DevExtreme.NETCore.Demos.ViewModels.SelectBoxViewModel <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"> @(Html.DevExtreme().SelectBox() .ID("search-box") .DataSource(d => d .Mvc() .LoadAction("GetItems") .Key("ID") ) .DisplayExpr("Name") .ValueExpr("ID") .SearchEnabled(true) ) </div> </div> </div> <div class="dx-fieldset"> <div class="dx-fieldset-header">EditBox</div> <div class="dx-field"> <div class="dx-field"> <div class="dx-field-label">Product</div> <div class="dx-field-value"> @(Html.DevExtreme().SelectBox() .DataSource(d => d .Mvc() .Controller("SelectBox") .Key("ID") .LoadAction("GetSimpleItems") .InsertAction("InsertSimpleItem") ) .DisplayExpr("Name") .AcceptCustomValue(true) .OnValueChanged("selectBox_valueChanged") .OnCustomItemCreating("selectBox_customItemCreating") .Value(new JS("initialEditBoxValue")) ) </div> </div> <div class="dx-field current-product"> Current product: <span class="current-value"> HD Video Player (ID: 0) </span> </div> </div> </div> </div> <div class="options"> <div class="caption">SearchBox Options</div> <div class="option"> <div>Search Mode</div> @(Html.DevExtreme().SelectBox() .DataSource(new JS("searchModes")) .Value(new JS("searchModes[0]")) .OnValueChanged("searchMode_changed") ) </div> <div class="option"> <div>Search Expression</div> @(Html.DevExtreme().SelectBox() .DataSource(new JS("searchExpressions")) .DisplayExpr("name") .ValueExpr("value") .Value(new JS("searchExpressions[0].value")) .OnValueChanged("searchExpr_changed") ) </div> <div class="option"> <div>Search Timeout</div> @(Html.DevExtreme().NumberBox() .Min(0) .Max(5000) .Value(200) .ShowSpinButtons(true) .Step(100) .OnValueChanged("searchTimeout_changed") ) </div> <div class="option"> <div>Minimum Search Length</div> @(Html.DevExtreme().NumberBox() .Min(0) .Max(5) .Value(0) .ShowSpinButtons(true) .OnValueChanged("minSearchLength_changed") ) </div> <div class="option"> @(Html.DevExtreme().CheckBox() .Value(false) .Text("Show Data Before Search") .OnValueChanged("showDataBeforeSearch_changed") ) </div> </div> </div> <script> var searchModes = ["contains", "startswith"]; var searchExpressions = [{ name: "'Name'", value: "Name" }, { name: "['Name', 'Category']", value: ['Name', 'Category'] }]; var initialEditBoxValue = { Name: "HD Video Player", ID: 0 } function selectBox_valueChanged(data) { $(".current-value").text(data.value.Name + " (ID: " + data.value.ID + ")"); } function getSearchBoxInstance() { return $("#search-box").dxSelectBox("instance"); } function searchMode_changed(data) { getSearchBoxInstance().option("searchMode", data.value); } function searchExpr_changed(data) { getSearchBoxInstance().option("searchExpr", data.value); } function searchTimeout_changed(data) { getSearchBoxInstance().option("searchTimeout", data.value); } function minSearchLength_changed(data) { getSearchBoxInstance().option("minSearchLength", data.value); } function showDataBeforeSearch_changed(data) { getSearchBoxInstance().option("showDataBeforeSearch", data.value); } function selectBox_customItemCreating(data) { if(!data.text) return; var dataSource = data.component.getDataSource(); var newItem = { Name: data.text }; var result = dataSource.store().insert(newItem); result.done(function() { dataSource.reload(); }) data.customItem = result; } </script>
using DevExtreme.AspNet.Data; using DevExtreme.AspNet.Mvc; using DevExtreme.NETCore.Demos.Models; using DevExtreme.NETCore.Demos.Models.SampleData; using DevExtreme.NETCore.Demos.ViewModels; using Microsoft.AspNetCore.Mvc; using Newtonsoft.Json; using System.Linq; namespace DevExtreme.NETCore.Demos.Controllers { public class SelectBoxController : Controller { public ActionResult SearchAndEditing() { return View(new SelectBoxViewModel { Items = SampleData.Electronics.Select(i => i.Name) }); } public ActionResult GetItems(DataSourceLoadOptions loadOptions) { return Content(JsonConvert.SerializeObject(DataSourceLoader.Load(SampleData.Electronics, loadOptions)), "application/json"); } public ActionResult GetSimpleItems(DataSourceLoadOptions loadOptions) { var result = DataSourceLoader.Load(SampleData.ElectronicsSimple, loadOptions); var resultJson = JsonConvert.SerializeObject(result); return Content(resultJson, "application/json"); } public ActionResult InsertSimpleItem(string values) { ElectronicsSimpleItem newItem = new ElectronicsSimpleItem(); JsonConvert.PopulateObject(values, newItem); var productIds = SampleData.ElectronicsSimple.Select(e => e.ID); var incrementedId = productIds.Max() + 1; newItem.ID = incrementedId; SampleData.ElectronicsSimple.Add(newItem); var resultJson = JsonConvert.SerializeObject(newItem); return Content(resultJson, "application/json"); } } }
using System; using System.Collections.Generic; using System.Linq; namespace DevExtreme.NETCore.Demos.Models.SampleData { public partial class SampleData { public static List<ElectronicsItem> Electronics = new List<ElectronicsItem> { new ElectronicsItem { ID = 1, Name = "HD Video Player", Price = 330, CurrentInventory = 225, Backorder = 0, Manufacturing = 10, Category = "Video Players", ImageSrc = "../../images/products/1-small.png", IconSrc = "../../images/icons/video-player.svg" }, new ElectronicsItem { ID = 2, Name = "SuperHD Player", Price = 400, CurrentInventory = 150, Backorder = 0, Manufacturing = 25, Category = "Video Players", ImageSrc = "../../images/products/2-small.png", IconSrc = "../../images/icons/video-player.svg" }, new ElectronicsItem { ID = 3, Name = "SuperPlasma 50", Price = 2400, CurrentInventory = 0, Backorder = 0, Manufacturing = 0, Category = "Televisions", ImageSrc = "../../images/products/3-small.png", IconSrc = "../../images/icons/tv.svg" }, new ElectronicsItem { ID = 4, Name = "SuperLED 50", Price = 1600, CurrentInventory = 77, Backorder = 0, Manufacturing = 55, Category = "Televisions", ImageSrc = "../../images/products/4-small.png", IconSrc = "../../images/icons/tv.svg" }, new ElectronicsItem { ID = 5, Name = "SuperLED 42", Price = 1450, CurrentInventory = 445, Backorder = 0, Manufacturing = 0, Category = "Televisions", ImageSrc = "../../images/products/5-small.png", IconSrc = "../../images/icons/tv.svg" }, new ElectronicsItem { ID = 6, Name = "SuperLED 55", Price = 1350, CurrentInventory = 345, Backorder = 0, Manufacturing = 5, Category = "Televisions", ImageSrc = "../../images/products/6-small.png", IconSrc = "../../images/icons/tv.svg" }, new ElectronicsItem { ID = 7, Name = "SuperLCD 42", Price = 1200, CurrentInventory = 210, Backorder = 0, Manufacturing = 20, Category = "Televisions", ImageSrc = "../../images/products/7-small.png", IconSrc = "../../images/icons/tv.svg" }, new ElectronicsItem { ID = 8, Name = "SuperPlasma 65", Price = 3500, CurrentInventory = 0, Backorder = 0, Manufacturing = 0, Category = "Televisions", ImageSrc = "../../images/products/8-small.png", IconSrc = "../../images/icons/tv.svg" }, new ElectronicsItem { ID = 9, Name = "SuperLCD 70", Price = 4000, CurrentInventory = 95, Backorder = 0, Manufacturing = 5, Category = "Televisions", ImageSrc = "../../images/products/9-small.png", IconSrc = "../../images/icons/tv.svg" }, new ElectronicsItem { ID = 10, Name = "DesktopLED 21", Price = 175, CurrentInventory = 0, Backorder = 425, Manufacturing = 75, Category = "Monitors", ImageSrc = "../../images/products/10-small.png", IconSrc = "../../images/icons/tv.svg" }, new ElectronicsItem { ID = 11, Name = "DesktopLED 19", Price = 165, CurrentInventory = 425, Backorder = 0, Manufacturing = 110, Category = "Monitors", ImageSrc = "../../images/products/11-small.png", IconSrc = "../../images/icons/tv.svg" }, new ElectronicsItem { ID = 12, Name = "DesktopLCD 21", Price = 170, CurrentInventory = 210, Backorder = 0, Manufacturing = 60, Category = "Monitors", ImageSrc = "../../images/products/12-small.png", IconSrc = "../../images/icons/tv.svg" }, new ElectronicsItem { ID = 13, Name = "DesktopLCD 19", Price = 160, CurrentInventory = 150, Backorder = 0, Manufacturing = 210, Category = "Monitors", ImageSrc = "../../images/products/13-small.png", IconSrc = "../../images/icons/tv.svg" }, new ElectronicsItem { ID = 14, Name = "Projector Plus", Price = 550, CurrentInventory = 0, Backorder = 55, Manufacturing = 10, Category = "Monitors", ImageSrc = "../../images/products/14-small.png", IconSrc = "../../images/icons/video-player.svg" }, new ElectronicsItem { ID = 15, Name = "Projector PlusHD", Price = 750, CurrentInventory = 110, Backorder = 0, Manufacturing = 90, Category = "Projectors", ImageSrc = "../../images/products/15-small.png", IconSrc = "../../images/icons/video-player.svg" }, new ElectronicsItem { ID = 16, Name = "Projector PlusHT", Price = 1050, CurrentInventory = 0, Backorder = 75, Manufacturing = 57, Category = "Projectors", ImageSrc = "../../images/products/16-small.png", IconSrc = "../../images/icons/video-player.svg" }, new ElectronicsItem { ID = 17, Name = "ExcelRemote IR", Price = 150, CurrentInventory = 650, Backorder = 0, Manufacturing = 190, Category = "Automation", ImageSrc = "../../images/products/17-small.png", IconSrc = "../../images/icons/video-player.svg" }, new ElectronicsItem { ID = 18, Name = "ExcelRemote BT", Price = 180, CurrentInventory = 310, Backorder = 0, Manufacturing = 0, Category = "Automation", ImageSrc = "../../images/products/18-small.png", IconSrc = "../../images/icons/video-player.svg" }, new ElectronicsItem { ID = 19, Name = "ExcelRemote IP", Price = 200, CurrentInventory = 0, Backorder = 325, Manufacturing = 225, Category = "Automation", ImageSrc = "../../images/products/19-small.png", IconSrc = "../../images/icons/video-player.svg" } }; } }
using System; using System.Collections.Generic; using System.Linq; namespace DevExtreme.NETCore.Demos.Models { public class ElectronicsItem { public int ID { get; set; } public string Category { get; set; } public string Name { get; set; } public int CurrentInventory { get; set; } public int Backorder { get; set; } public int Manufacturing { get; set; } public int Price { get; set; } public string ImageSrc { get; set; } public string IconSrc { get; set; } } }
using System; using System.Collections.Generic; using System.Linq; namespace DevExtreme.NETCore.Demos.Models.SampleData { public partial class SampleData { public static List<ElectronicsSimpleItem> ElectronicsSimple = new List<ElectronicsSimpleItem> { new ElectronicsSimpleItem { Name = "HD Video Player", ID = 0 }, new ElectronicsSimpleItem { Name = "SuperHD Video Player", ID= 1 }, new ElectronicsSimpleItem { Name = "SuperPlasma 50", ID = 2 }, new ElectronicsSimpleItem { Name = "SuperLED 50", ID = 3 }, new ElectronicsSimpleItem { Name = "SuperLED 42", ID = 4 }, new ElectronicsSimpleItem { Name = "SuperLCD 55", ID = 5 }, new ElectronicsSimpleItem { Name = "SuperLCD 42", ID = 6 }, new ElectronicsSimpleItem { Name = "SuperPlasma 65", ID = 7 }, new ElectronicsSimpleItem { Name = "SuperLCD 70", ID = 8 }, new ElectronicsSimpleItem { Name = "Projector Plus", ID = 9 }, new ElectronicsSimpleItem { Name = "Projector PlusHT", ID = 10 }, new ElectronicsSimpleItem { Name = "ExcelRemote IR", ID = 11 }, new ElectronicsSimpleItem { Name = "ExcelRemote Bluetooth", ID = 12 }, new ElectronicsSimpleItem { Name = "ExcelRemote IP", ID = 13 } }; } }
using System; using System.Collections.Generic; using System.Linq; namespace DevExtreme.NETCore.Demos.Models { public class ElectronicsSimpleItem { public int ID { get; set; } public string Name { get; set; } } }
using System; using System.Collections.Generic; using System.Linq; namespace DevExtreme.NETCore.Demos.ViewModels { public class SelectBoxViewModel { public IEnumerable<string> Items { get; set; } } }
.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; }