DevExtreme React - Array Only

Bind the Lookup to an array by passing it to the dataSource option. The array may contain primitive values...

jQuery
JavaScript
var products = ["HD Video Player", "SuperHD Video Player", "SuperPlasma 50", "SuperLED 50"];

$(function() {
    $("#lookupContainer").dxLookup({
        dataSource: products
    });
});
Angular
TypeScript
HTML
import { DxLookupModule } from "devextreme-angular";
// ...
export class AppComponent {
    lookupDataSource = ["HD Video Player", "SuperHD Video Player", "SuperPlasma 50", "SuperLED 50"];
}
@NgModule({
    imports: [
        // ...
        DxLookupModule
    ],
    // ...
})
<dx-lookup
    [dataSource]="lookupDataSource">
</dx-lookup>

... or objects.

jQuery
JavaScript
var products = [
    { name: "HD Video Player", price: 100 },
    { name: "SuperHD Video Player", price: 420 },
    { name: "SuperPlasma 50", price: 1500 },
    { name: "SuperLED 50", price: 200 }
];

$(function() {
    $("#lookupContainer").dxLookup({
        dataSource: products,
        valueExpr: 'price',
        displayExpr: 'name'
    });
});
Angular
TypeScript
HTML
import { DxLookupModule } from "devextreme-angular";
// ...
export class AppComponent {
    lookupDataSource = [
        { name: "HD Video Player", price: 100 },
        { name: "SuperHD Video Player", price: 420 },
        { name: "SuperPlasma 50", price: 1500 },
        { name: "SuperLED 50", price: 200 }
    ];
}
@NgModule({
    imports: [
        // ...
        DxLookupModule
    ],
    // ...
})
<dx-lookup
    [dataSource]="lookupDataSource"
    valueExpr="price"
    displayExpr="name">
</dx-lookup>

You can create a Query if objects in an array need to be processed (sorted, filtered, grouped, etc.). For example, in the following code, a Query sorts objects in the products array by the price field in descending order:

jQuery
JavaScript
var products = [
    { name: "HD Video Player", price: 100 },
    // ...
];

$(function() {
    $("#lookupContainer").dxLookup({
        dataSource: DevExpress.data.query(products)
                        .sortBy("price", true)
                        .toArray(),
        valueExpr: 'price',
        displayExpr: 'name'
    });
});
Angular
TypeScript
HTML
import { DxLookupModule } from "devextreme-angular";
import query from "devextreme/data/query";
// ...
export class AppComponent {
    products = [
        { name: "HD Video Player", price: 100 },
        // ...
    ];
    getSortedProducts () {
        return query(this.products)
                .sortBy("price", true)
                .toArray();
    }
}
@NgModule({
    imports: [
        // ...
        DxLookupModule
    ],
    // ...
})
<dx-lookup
    [dataSource]="getSortedProducts()"
    valueExpr="price"
    displayExpr="name">
</dx-lookup>
See Also