DevExtreme Vue - Searching

NOTE
Searching works when inputting a plain data structure only. However, if you need the searching capability and grouped data, transform the plain data using the DataSource's group option.

Searching is disabled in the List widget by default. Assign true to the searchEnabled option to display the search panel. The searchExpr option specifies which data fields should be searched. Assign an array of field names to it if you need to search several fields.

jQuery
JavaScript
var 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
HTML
TypeScript
<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
     ],
     // ...
 })

View Demo

When a user types a string in the input field, the List suggests all items that contain this string. Assign 'startswith' to the searchMode option if you want the List to suggest only those items that start with the input string.

jQuery
JavaScript
$(function() {
    $("#listContainer").dxList({
        dataSource: listData,
        searchEnabled: true,
        searchExpr: 'country',
        searchMode: 'startswith',
        itemTemplate: function(data) {
            return $("<div>").text(data.capital + " (" + data.country + ")");
        }
    });
});
Angular
HTML
TypeScript
<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 option. The following code changes the panel's default width and placeholder:

jQuery
JavaScript
$(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
HTML
TypeScript
<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