React List - Searching
Searching is disabled in the List UI component by default. Assign true to the searchEnabled property to display the search panel. The searchExpr property specifies which data fields should be searched. Assign an array of field names to it if you need to search several fields.
jQuery
const listData = [ { id: 1, country: "Afghanistan", capital: "Kabul" }, { id: 2, country: "Albania", capital: "Tirana" }, // ... ]; $(function() { $("#listContainer").dxList({ dataSource: listData, searchEnabled: true, searchExpr: ['country', 'capital'], itemTemplate: function(data) { return $("<div>").text(data.capital + " (" + data.country + ")"); } }); });
Angular
<dx-list [dataSource]="listData" [searchEnabled]="true" [searchExpr]="['country', 'capital']" itemTemplate="listItem"> <div *dxTemplate="let item of 'listItem'"> <div>{{item.capital}} ({{item.country}})</div> </div> </dx-list>
import { DxListModule } from "devextreme-angular"; // ... export class AppComponent { listData = [ { id: 1, country: "Afghanistan", capital: "Kabul" }, { id: 2, country: "Albania", capital: "Tirana" }, // ... ]; } @NgModule({ imports: [ // ... DxListModule ], // ... })
When a user types a string in the input field, the List suggests all items that contain this string. Assign 'startswith' to the searchMode property if you want the List to suggest only those items that start with the input string.
jQuery
$(function() { $("#listContainer").dxList({ dataSource: listData, searchEnabled: true, searchExpr: 'country', searchMode: 'startswith', itemTemplate: function(data) { return $("<div>").text(data.capital + " (" + data.country + ")"); } }); });
Angular
<dx-list [dataSource]="listData" [searchEnabled]="true" [searchExpr]="['country', 'capital']" searchMode="startswith" itemTemplate="listItem"> <div *dxTemplate="let item of 'listItem'"> <div>{{item.capital}} ({{item.country}})</div> </div> </dx-list>
import { DxListModule } from "devextreme-angular"; // ... export class AppComponent { listData = [ { id: 1, country: "Afghanistan", capital: "Kabul" }, { id: 2, country: "Albania", capital: "Tirana" }, // ... ]; } @NgModule({ imports: [ // ... DxListModule ], // ... })
You can customize the search panel by specifying the searchEditorOptions property. The following code changes the panel's default width and placeholder:
jQuery
$(function() { $("#listContainer").dxList({ dataSource: listData, searchEnabled: true, searchExpr: 'country', searchEditorOptions: { placeholder: "Type search value here...", width: 300 }, itemTemplate: function(data) { return $("<div>").text(data.capital + " (" + data.country + ")"); } }); });
Angular
<dx-list [dataSource]="listData" [searchEnabled]="true" [searchExpr]="['country', 'capital']" itemTemplate="listItem"> <dxo-search-editor-options placeholder="Type search value here..." [width]="300"> </dxo-search-editor-options> <div *dxTemplate="let item of 'listItem'"> <div>{{item.capital}} ({{item.country}})</div> </div> </dx-list>
import { DxListModule } from "devextreme-angular"; // ... export class AppComponent { listData = [ { id: 1, country: "Afghanistan", capital: "Kabul" }, { id: 2, country: "Albania", capital: "Tirana" }, // ... ]; } @NgModule({ imports: [ // ... DxListModule ], // ... })
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.