All docs
V19.2
24.2
The page you are viewing does not exist in version 24.2.
24.1
The page you are viewing does not exist in version 24.1.
23.2
The page you are viewing does not exist in version 23.2.
23.1
The page you are viewing does not exist in version 23.1.
22.2
The page you are viewing does not exist in version 22.2.
22.1
The page you are viewing does not exist in version 22.1.
21.2
The page you are viewing does not exist in version 21.2.
21.1
The page you are viewing does not exist in version 21.1.
20.2
The page you are viewing does not exist in version 20.2.
20.1
The page you are viewing does not exist in version 20.1.
19.2
19.1
18.2
18.1
17.2
A newer version of this page is available. Switch to the current version.

JavaScript/jQuery Lookup API

The Lookup is a widget that allows an end user to search for an item in a collection shown in a drop-down menu.

import Lookup from "devextreme/ui/lookup"
Type:

Object

Configuration

An object defining configuration options for the Lookup widget.

Name Description
accessKey

Specifies the shortcut key that sets focus on the widget.

activeStateEnabled

Specifies whether or not the widget changes its state when interacting with a user.

animation

Configures widget visibility animations. This object contains two fields: show and hide.

applyButtonText

The text displayed on the Apply button.

applyValueMode

Specifies the way an end-user applies the selected value.

cancelButtonText

The text displayed on the Cancel button.

cleanSearchOnOpening

Specifies whether or not the widget cleans the search box when the popup window is displayed.

clearButtonText

The text displayed on the Clear button.

closeOnOutsideClick

Specifies whether to close the drop-down menu if a user clicks outside it.

dataSource

Binds the widget to data.

deferRendering

Specifies whether to render the drop-down field's content when it is displayed. If false, the content is rendered immediately.

disabled

Specifies whether the widget responds to user interaction.

displayExpr

Specifies the data field whose values should be displayed.

displayValue

Returns the value currently displayed by the widget.

dropDownCentered

Specifies whether to vertically align the drop-down menu so that the selected item is in its center. Applies only in Material Design themes.

elementAttr

Specifies the attributes to be attached to the widget's root element.

fieldComponent

An alias for the fieldTemplate property specified in React. Accepts a custom component. Refer to Using a Custom Component for more information.

fieldRender

An alias for the fieldTemplate property specified in React. Accepts a rendering function. Refer to Using a Rendering Function for more information.

fieldTemplate

Specifies a custom template for the input field.

focusStateEnabled

Specifies whether the widget can be focused using keyboard navigation.

fullScreen

A Boolean value specifying whether or not to display the lookup in full-screen mode.

groupComponent

An alias for the groupTemplate property specified in React. Accepts a custom component. Refer to Using a Custom Component for more information.

grouped

A Boolean value specifying whether or not to group widget items.

groupRender

An alias for the groupTemplate property specified in React. Accepts a rendering function. Refer to Using a Rendering Function for more information.

groupTemplate

Specifies a custom template for group captions.

height

Specifies the widget's height.

hint

Specifies text for a hint that appears when a user pauses on the widget.

hoverStateEnabled

Specifies whether the widget changes its state when a user pauses on it.

inputAttr

Specifies the attributes to be passed on to the underlying HTML element.

isValid

Specifies or indicates whether the editor's value is valid.

itemComponent

An alias for the itemTemplate property specified in React. Accepts a custom component. Refer to Using a Custom Component for more information.

itemRender

An alias for the itemTemplate property specified in React. Accepts a rendering function. Refer to Using a Rendering Function for more information.

items

An array of items displayed by the widget.

itemTemplate

Specifies a custom template for items.

minSearchLength

The minimum number of characters that must be entered into the text box to begin a search. Applies only if searchEnabled is true.

name

The value to be assigned to the name attribute of the underlying HTML element.

nextButtonText

The text displayed on the button used to load the next page from the data source.

noDataText

The text or HTML markup displayed by the widget if the item collection is empty.

onClosed

A function that is executed once the drop-down editor is closed.

onContentReady

A function that is executed when the widget's content is ready and each time the content is changed.

onDisposing

A function that is executed before the widget is disposed of.

onInitialized

A function used in JavaScript frameworks to save the widget instance.

onItemClick

A function that is executed when a list item is clicked or tapped.

onOpened

A function that is executed once the drop-down editor is opened.

onOptionChanged

A function that is executed after a widget option is changed.

onPageLoading

A function that is executed before the next page is loaded.

onPullRefresh

A function that is executed when the "pull to refresh" gesture is performed on the drop-down item list. Supported in mobile themes only.

onScroll

A function that is executed on each scroll gesture performed on the drop-down item list.

onSelectionChanged

A function that is executed when a list item is selected or selection is canceled.

onTitleRendered

A function that is executed when the drop-down list's title is rendered.

onValueChanged

A function that is executed after the widget's value is changed.

opened

Specifies whether or not the drop-down editor is displayed.

pageLoadingText

Specifies the text shown in the pullDown panel, which is displayed when the widget is scrolled to the bottom.

pageLoadMode

Specifies whether the next page is loaded when a user scrolls the widget to the bottom or when the "next" button is clicked.

placeholder

The text displayed by the widget when nothing is selected.

popupHeight

Specifies the popup element's height. Applies only if fullScreen is false.

popupWidth

Specifies the popup element's width. Applies only if fullScreen is false.

position

An object defining widget positioning options.

pulledDownText

Specifies the text displayed in the pullDown panel when the widget is pulled below the refresh threshold.

pullingDownText

Specifies the text shown in the pullDown panel while the list is being pulled down to the refresh threshold.

pullRefreshEnabled

A Boolean value specifying whether or not the widget supports the "pull down to refresh" gesture.

refreshingText

Specifies the text displayed in the pullDown panel while the widget is being refreshed.

rtlEnabled

Switches the widget to a right-to-left representation.

searchEnabled

Specifies whether the search box is visible.

searchExpr

Specifies the name of a data source item field or an expression whose value is compared to the search criterion.

searchMode

Specifies a comparison operation used to search widget items.

searchPlaceholder

The text that is provided as a hint in the lookup's search bar.

searchTimeout

Specifies the time delay, in milliseconds, after the last character has been typed in, before a search is executed.

selectedItem

Gets the currently selected item.

shading

Specifies whether to shade the container when the lookup is active. Applies only if usePopover is false.

showCancelButton

Specifies whether to display the Cancel button in the lookup window.

showClearButton

Specifies whether or not to display the Clear button in the lookup window.

showDataBeforeSearch

Specifies whether or not the widget displays unfiltered values until a user types a number of characters exceeding the minSearchLength option value.

showPopupTitle

A Boolean value specifying whether or not to display the title in the popup window.

stylingMode

Specifies how the widget's text field is styled.

tabIndex

Specifies the number of the element when the Tab key is used for navigating.

text

The read-only option that holds the text displayed by the widget input element.

title

The title of the lookup window.

titleComponent

An alias for the titleTemplate property specified in React. Accepts a custom component. Refer to Using a Custom Component for more information.

titleRender

An alias for the titleTemplate property specified in React. Accepts a rendering function. Refer to Using a Rendering Function for more information.

titleTemplate

Specifies a custom template for the title.

useNativeScrolling

Specifies whether or not the widget uses native scrolling.

usePopover

Specifies whether or not to show lookup contents in a Popover widget.

validationError

Information on the broken validation rule. Contains the first item from the validationErrors array.

validationErrors

An array of the validation rules that failed.

validationMessageMode

Specifies how the message about the validation rules that are not satisfied by this editor's value is displayed.

validationStatus

Indicates or specifies the current validation status.

value

Specifies the currently selected value. May be an object if dataSource contains objects and valueExpr is not set.

valueChangeEvent

Specifies the DOM events after which the widget's search results should be updated.

valueExpr

Specifies which data field provides unique values to the widget's value.

visible

Specifies whether the widget is visible.

width

Specifies the widget's width.

wrapItemText

Specifies whether text that exceeds the drop-down list width should be wrapped.

See Also

Methods

This section describes the methods that control the Lookup widget.

Name Description
beginUpdate()

Prevents the widget from refreshing until the endUpdate() method is called.

blur()

Removes focus from the input element.

close()

Closes the drop-down editor.

content()

Gets the popup window's content.

defaultOptions(rule)

Specifies the device-dependent default configuration options for this component.

dispose()

Disposes of all the resources allocated to the Lookup instance.

element()

Gets the root widget element.

endUpdate()

Refreshes the widget after a call of the beginUpdate() method.

field()

Gets the widget's <input> element.

focus()

Sets focus to the input element representing the widget.

getDataSource()

Gets the DataSource instance.

getInstance(element)

Gets the instance of a widget found using its DOM node.

instance()

Gets the widget's instance. Use it to access other methods of the widget.

off(eventName)

Detaches all event handlers from a single event.

off(eventName, eventHandler)

Detaches a particular event handler from a single event.

on(eventName, eventHandler)

Subscribes to an event.

on(events)

Subscribes to events.

open()

Opens the drop-down editor.

option()

Gets all widget options.

option(optionName)

Gets the value of a single option.

option(optionName, optionValue)

Updates the value of a single option.

option(options)

Updates the values of several options.

registerKeyHandler(key, handler)

Registers a handler to be executed when a user presses a specific key.

repaint()

Repaints the widget without reloading data. Call it to update the widget's markup.

reset()

Resets the value option to the default value.

resetOption(optionName)

Resets an option to its default value.

See Also

Events

This section describes events fired by this widget.

Name Description
closed

Raised once the drop-down editor is closed.

contentReady

Raised when the widget's content is ready.

disposing

Raised before the widget is disposed of.

initialized

Raised only once, after the widget is initialized.

itemClick

Raised when a list item is clicked or tapped.

opened

Raised once the drop-down editor is opened.

optionChanged

Raised after a widget option is changed.

pageLoading

Raised before the next page is loaded.

pullRefresh

Raised when the "pull to refresh" gesture is performed on the drop-down item list.

scroll

Raised on each scroll gesture performed on the drop-down item list.

selectionChanged

Raised when a list item is selected or selection is canceled.

titleRendered

Raised when the drop-down list's title is rendered.

valueChanged

Raised after the widget's value is changed.

See Also