abstract OO.ui.mixin.LookupElement

Constructor

new OO.ui.mixin.LookupElement(config)abstract #

LookupElement is a mixin that creates a menu of suggested values for a text input widget. Suggested values are based on the characters the user types into the text input field and, in general, the menu is only displayed when the user types. If a suggested value is chosen from the lookup menu, that value becomes the value of the input field.

Note that a new menu of suggested items is displayed when a value is chosen from the lookup menu. If this is not the desired behavior, disable lookup menus with the #setLookupsDisabled method, then set the value, then re-enable lookups.

See the OOUI demos for an example.

Parameters:

Name Type Attributes Description
config Object optional

Configuration options

Properties:
Name Type Attributes Default Description
$overlay jQuery optional

Overlay for the lookup menu; defaults to relative positioning. See https://www.mediawiki.org/wiki/OOUI/Concepts#Overlays.

$container jQuery optional
this.$element

The container element. The lookup menu is rendered beneath the specified element.

menu Object optional

Configuration options to pass to menu select widget

allowSuggestionsWhenEmpty boolean optional
false

Request and display a lookup menu when the text input is empty. By default, the lookup menu is not generated and displayed until the user begins to type.

highlightFirst boolean optional
true

Whether the first lookup result should be highlighted (so, that the user can take it over into the input with simply pressing return) automatically or not.

showSuggestionsOnFocus boolean optional
true

Show suggestions when focusing the input. If this is set to false, suggestions will still be shown on a mousedown triggered focus. This matches browser autocomplete behavior.

Mixes in:
Source:

LookupElement is a mixin that creates a menu of suggested values for a text input widget.

Methods

getLookupCacheDataFromResponse(response) → {Mixed}abstractprotected #

Pre-process data returned by the request from #getLookupRequest.

The return value of this function will be cached, and any further queries for the given value will use the cache rather than doing API requests.

Parameters:

Name Type Description
response Mixed

Response from server

Source:

Returns:

Cached result data

Type
Mixed
Pre-process data returned by the request from #getLookupRequest.

getLookupMenuOptionsFromData(data) → {Array.<OO.ui.MenuOptionWidget>}abstractprotected #

Get a list of menu option widgets from the (possibly cached) data returned by #getLookupCacheDataFromResponse.

Parameters:

Name Type Description
data Mixed

Cached result data, usually an array

Source:

Returns:

Menu items

Type
Array.<OO.ui.MenuOptionWidget>

Get a list of menu option widgets from the (possibly cached) data returned by #getLookupCacheDataFromResponse.

getLookupRequest() → {jQuery.Promise}abstractprotected #

Get a new request object of the current lookup query value.

Source:

Returns:

jQuery AJAX object, or promise object with an .abort() method

Type
jQuery.Promise
Get a new request object of the current lookup query value.

getRequest() #

getRequestCacheDataFromResponse() #

getRequestQuery() #

onLookupInputBlur(e)protected #

Handle input blur event.

Parameters:

Name Type Description
e jQuery.Event

Input blur event

Source:
Handle input blur event.

onLookupInputChange(value)protected #

Handle input change event.

Parameters:

Name Type Description
value string

New input value

Source:
Handle input change event.

onLookupInputFocus(e)protected #

Handle input focus event.

Parameters:

Name Type Description
e jQuery.Event

Input focus event

Source:
Handle input focus event.

onLookupInputMouseDown(e)protected #

Handle input mouse down event.

Parameters:

Name Type Description
e jQuery.Event

Input mouse down event

Source:
Handle input mouse down event.

onLookupMenuChoose(item)protected #

Handle menu item 'choose' event, updating the text input value to the value of the clicked item.

Parameters:

Name Type Description
item OO.ui.MenuOptionWidget

Selected item

Source:
Handle menu item 'choose' event, updating the text input value to the value of the clicked item.

onLookupMenuToggle(visible)protected #

Handle the lookup menu being shown/hidden.

Parameters:

Name Type Description
visible boolean

Whether the lookup menu is now visible.

Source:
Handle the lookup menu being shown/hidden.

setLookupsDisabled(disabled) #

Disable or re-enable lookups.

When lookups are disabled, calls to #populateLookupMenu will be ignored.

Parameters:

Name Type Attributes Default Description
disabled boolean optional
false

Disable lookups

Source:
Disable or re-enable lookups.

setReadOnly(readOnly) → {OO.ui.Element} #

Set the read-only state of the widget.

This will also disable/enable the lookups functionality.

Parameters:

Name Type Attributes Default Description
readOnly boolean optional
false

Make input read-only

Source:

Returns:

The element, for chaining

Type
OO.ui.Element
Set the read-only state of the widget.