RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://js.devexpress.com/Vue/Documentation/Guide/UI_Components/List/Searching/ below:

Vue List - Searching | Vue Documentation

Vue List - 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

group

property.

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
     ],
     // ...
 })

Vue

<template>
    <DxList
        :data-source="listData"
        :search-enabled="true"
        :search-expr="['country', 'capital']"
        item-template="list-item">
        <template #list-item="{ data }">
            <div>{{ data.capital }} ({{ data.country }})</div>
        </template>
    </DxList>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';
import DxList from 'devextreme-vue/list';

const listData = [
    { id: 1, country: "Afghanistan", capital: "Kabul" },
    { id: 2, country: "Albania", capital: "Tirana" },
    // ...
];

export default {
    components: {
        DxList
    },
    data() {
        return {
            listData
        }
    }
}
</script>

React

import React from 'react';
import 'devextreme/dist/css/dx.light.css';
import List from 'devextreme-react/list';

const listData = [
    { id: 1, country: "Afghanistan", capital: "Kabul" },
    { id: 2, country: "Albania", capital: "Tirana" },
    // ...
];

const ListItem = (data) => {
    return (
        <div>{ data.capital } ({ data.country })</div>
    );
};

export default function App() {
    return (
        <List
            dataSource={listData}
            itemRender={ListItem}
            searchEnabled={true}
            searchExpr={['country', 'capital']}
        />
    );
}

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 property if you want the List to suggest only those items that start with the input string.

jQuery

$(function() {
    $("#listContainer").dxList({
        // ...
        searchMode: 'startswith'
    });
});

Angular

<dx-list ...
    searchMode="startswith">
</dx-list>

Vue

<template>
    <DxList ...
        search-mode="startswith">
    </DxList>
</template>

<script>
// ...
</script>

React

// ...
export default function App() {
    return (
        <List ...
            searchMode="startswith"
        />
    );
}

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({
        // ...
        searchEditorOptions: {
            placeholder: "Type search value here...",
            width: 300
        }
    });
});

Angular

<dx-list ... >
    <dxo-search-editor-options
        placeholder="Type search value here..."
        [width]="300">
    </dxo-search-editor-options>
</dx-list>

Vue

<template>
    <DxList ... >
        <DxSearchEditorOptions
            placeholder="Type search value here..."
            :width="300"
        />
    </DxList>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';
import DxList, {
    DxSearchEditorOptions
} from 'devextreme-vue/list';

export default {
    components: {
        DxList,
        DxSearchEditorOptions
    },
    // ...
}
</script>

React

import React from 'react';
import 'devextreme/dist/css/dx.light.css';
import List, {
    SearchEditorOptions
} from 'devextreme-react/list';

export default function App() {
    return (
        <List ... >
            <SearchEditorOptions
                placeholder="Type search value here..."
                width={300}
            />
        </List>
    );
}