The following code adds the Lookup widget to your page. The simplest configuration requires only a dataSource to be specified. In addition, you can define the placeholder to be displayed when the Lookup input field is empty.

jQuery

HTML

JavaScript

<div id="lookupContainer"></div>

$(function() {
    $("#lookupContainer").dxLookup({
        dataSource: [
            "HD Video Player",
            "SuperHD Video Player",
            "SuperPlasma 50",
            // ...
        ],
        placeholder: "Select a product..."
    });
});

Angular

HTML

TypeScript

<dx-lookup
    [dataSource]="lookupDataSource"
    placeholder="Select a product...">
</dx-lookup>

import { DxLookupModule } from "devextreme-angular";
// ...
export class AppComponent {
    lookupDataSource = [ "HD Video Player", "SuperHD Video Player", "SuperPlasma 50" ];
}
@NgModule({
    imports: [
        // ...
        DxLookupModule
    ],
    // ...
})

Vue

<template>
    <DxLookup
        :data-source="dataSource"
        placeholder="Select a product..."
    />
</template>

<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { DxLookup } from 'devextreme-vue/lookup';

export default {
    components: {
        DxLookup
    },
    data() {
        return {
            dataSource: [
                'HD Video Player',
                'SuperHD Video Player',
                'SuperPlasma 50',
                // ...
            ]
        };
    }
}
</script>

React

import React from 'react';
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { Lookup } from 'devextreme-react/lookup';

const dataSource = [
    'HD Video Player',
    'SuperHD Video Player',
    'SuperPlasma 50',
    // ...
];

class App extends React.Component {
    render() {
        return (
            <Lookup
                dataSource={dataSource}
                placeholder="Select a product..."
            />
        );
    }
}

export default App;

If your data is an array of objects, specify:

valueExpr
The data field whose value will be written into the value option.
displayExpr
The data field whose value will be displayed within the inner List widget and in the input field of the Lookup.

jQuery

JavaScript

const lookupData = [
    { id: 1, country: "Afghanistan" },
    { id: 2, country: "Albania" },
    // ...
];

$(function() {
    $("#lookupContainer").dxLookup({
        dataSource: lookupData,
        valueExpr: 'id',
        displayExpr: 'country'
    });
});

Angular

HTML

TypeScript

<dx-lookup
    [dataSource]="lookupDataSource"
    valueExpr="id"
    displayExpr="country">
</dx-lookup>

import { DxLookupModule } from "devextreme-angular";
// ...
export class AppComponent {
    lookupDataSource = [
        { id: 1, country: "Afghanistan" },
        { id: 2, country: "Albania" },
        // ...
    ];
}
@NgModule({
    imports: [
        // ...
        DxLookupModule
    ],
    // ...
})

Vue

<template>
    <DxLookup
        :data-source="lookupData"
        value-expr="id"
        display-expr="country"
    />
</template>

<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { DxLookup } from 'devextreme-vue/lookup';

export default {
    components: {
        DxLookup
    },
    data() {
        return {
            lookupData: [
                { id: 1, country: 'Afghanistan' },
                { id: 2, country: 'Albania' },
                // ...
            ]
        };
    }
}
</script>

React

import React from 'react';
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { Lookup } from 'devextreme-react/lookup';

const lookupData = [
    { id: 1, country: 'Afghanistan' },
    { id: 2, country: 'Albania' },
    // ...
];

class App extends React.Component {
    render() {
        return (
            <Lookup
                dataSource={lookupData}
                valueExpr="id"
                displayExpr="country"
            />
        );
    }
}

export default App;

General Information

.NET Subscription

Common Tools

Quality Assurance and Productivity

Desktop

Controls

Tools

Frameworks and Libraries

Web

Controls and Extensions

Tools

Maintenance Mode

Mobile

Enterprise and Analytic Tools

End-User Documentation

General Information

.NET Subscription

Common Tools

Quality Assurance and Productivity

Desktop

Controls

Tools

Frameworks and Libraries

Web

Controls and Extensions

Tools

Maintenance Mode

Mobile

Enterprise and Analytic Tools

End-User Documentation

DevExtreme jQuery - Overview

jQuery

Angular

Vue

React

jQuery

Angular

Vue

React

See Also