Class: MenuTagMultiselectWidget

.ui.MenuTagMultiselectWidget(configopt)

MenuTagMultiselectWidget is a OO.ui.TagMultiselectWidget intended to use a menu of selectable options.

Parameters:
Name Type Attributes Description
config Object <optional>

Configuration object

Properties
Name Type Attributes Default Description
menu Object <optional>

Configuration object for the menu widget
$overlay jQuery <optional>

An overlay for the menu. See .
options Array.<Object> <optional>
 []

Array of menu options in the format { data: …, label: … }
Source:
Example
// Example: A basic MenuTagMultiselectWidget.
    var widget = new OO.ui.MenuTagMultiselectWidget( {
        inputPosition: 'outline',
        options: [
           { data: 'option1', label: 'Option 1' },
           { data: 'option2', label: 'Option 2' },
           { data: 'option3', label: 'Option 3' },
        ],
        selected: [ 'option1', 'option2' ]
    } );
    $( 'body' ).append( widget.$element );

Extends

Methods

addAllowedValue(value)

Add a value to the allowed values list

Parameters:
Name Type Description
value string

Allowed data value
Inherited From:
Source:

addOptions(menuOptions)

Add options to the menu

Parameters:
Name Type Description
menuOptions Array.<Object>

Object defining options
Source:

addTag(data, labelopt) → {boolean}

Add tag to the display area

Parameters:
Name Type Attributes Description
data string | Object

Tag data
label string <optional>

Tag label. If no label is provided, the stringified version of the data will be used instead.
Inherited From:
Source:
Returns:

Item was added successfully

Type
boolean

addTagFromInput()

Add tag from input value

Overrides:
Source:

checkValidity() → {boolean}

Check whether all items in the widget are valid

Inherited From:
Source:
Returns:

Widget is valid

Type
boolean

clearInput()

Clear the input

Inherited From:
Source:

createMenuOptionWidget(data, labelopt) → {OO.ui.OptionWidget}

Create a menu option widget.

Parameters:
Name Type Attributes Description
data string

Item data
label string <optional>

Item label
Source:
Returns:

Option widget

Type
OO.ui.OptionWidget

createMenuWidget(menuConfig) → {OO.ui.MenuSelectWidget}

Create the menu for this widget. This is in a separate method so that child classes can override this without polluting the constructor with unnecessary extra objects that will be overidden.

Parameters:
Name Type Description
menuConfig Object

Configuration options
Source:
Returns:

Menu widget

Type
OO.ui.MenuSelectWidget

(protected) createTagItemWidget(data, label) → {OO.ui.TagItemWidget}

Construct a OO.ui.TagItemWidget (or a subclass thereof) from given label and data.

Parameters:
Name Type Description
data string

Item data
label string

The label text.
Inherited From:
Source:
Returns:
Type
OO.ui.TagItemWidget

doInputArrow(e, direction, withMetaKeyopt)

Perform an action after the arrow key on the input, select the previous or next item from the input. See #getPreviousItem and #getNextItem

Parameters:
Name Type Attributes Description
e jQuery.Event

Event data
direction string

Direction of the movement; forwards or backwards
withMetaKey boolean <optional>

Whether this key was pressed with a meta key like 'ctrl'
Inherited From:
Source:

doInputBackspace(e, withMetaKeyopt) → {boolean}

Perform an action responding to the enter key on the input

Parameters:
Name Type Attributes Description
e jQuery.Event

Event data
withMetaKey boolean <optional>

Whether this key was pressed with a meta key like 'ctrl'
Inherited From:
Source:
Returns:

Whether to prevent defaults

Type
boolean

doInputEnter(e, withMetaKeyopt) → {boolean}

Perform an action after the enter key on the input

Parameters:
Name Type Attributes Description
e jQuery.Event

Event data
withMetaKey boolean <optional>

Whether this key was pressed with a meta key like 'ctrl'
Inherited From:
Source:
Returns:

Whether to prevent defaults

Type
boolean

doInputEscape(e)

Perform an action after the escape key on the input

Parameters:
Name Type Description
e jQuery.Event

Event data
Inherited From:
Source:

getAllowedValues() → {Array.<string>}

Get the allowed values list

Overrides:
Source:
Returns:

Allowed data values

Type
Array.<string>

getClosestScrollableElementContainer() → {HTMLElement}

Get closest scrollable container.

Inherited From:
Source:
Returns:

Closest scrollable container

Type
HTMLElement

getData() → {Mixed}

Get element data.

Inherited From:
Source:
Returns:

Element data

Type
Mixed

getElementDocument() → {HTMLDocument}

Get the DOM document.

Inherited From:
Source:
Returns:

Document object

Type
HTMLDocument

getElementGroup() → {OO.ui.mixin.GroupElement|null}

Get group element is in.

Inherited From:
Source:
Returns:

Group element, null if none

Type
OO.ui.mixin.GroupElement | null

getElementId() → {string}

Ensure that the element has an 'id' attribute, setting it to an unique value if it's missing, and return its value.

Inherited From:
Source:
Returns:
Type
string

getElementWindow() → {Window}

Get the DOM window.

Inherited From:
Source:
Returns:

Window object

Type
Window

getInputId() → {string|null}

Get an ID of a labelable node which is part of this widget, if any, to be used for <label for> value.

If this function returns null, the widget should have a meaningful #simulateLabelClick method instead.

Inherited From:
Source:
Returns:

The ID of the labelable element

Type
string | null

getMenu() → {OO.ui.MenuSelectWidget}

Get the menu

Source:
Returns:

Menu

Type
OO.ui.MenuSelectWidget

getMenuVisibleItems() → {Array.<OO.ui.MenuOptionWidget>}

Return the visible items in the menu. This is mainly used for when the menu is filtering results.

Source:
Returns:

Visible results

Type
Array.<OO.ui.MenuOptionWidget>

(protected) getNextItem(itemopt) → {OO.ui.Widget}

Given an item, returns the item after it. If the item is already the last item, return this.input. If no item is passed, returns the very first item.

Parameters:
Name Type Attributes Description
item OO.ui.TagItemWidget <optional>

Tag item
Inherited From:
Source:
Returns:

The next widget available.

Type
OO.ui.Widget

(protected) getPreviousItem(itemopt) → {OO.ui.Widget}

Given an item, returns the item before it. If the item is already the first item, return this.input. If no item is passed, returns the very last item.

Parameters:
Name Type Attributes Description
item OO.ui.TagItemWidget <optional>

Tag item
Inherited From:
Source:
Returns:

The previous widget available.

Type
OO.ui.Widget

getTagName() → {string}

Get the HTML tag name.

Override this method to base the result on instance information.

Inherited From:
Source:
Returns:

HTML tag name

Type
string

getValue() → {Array.<string>|Array.<Object>}

Get the datas of the currently selected items

Inherited From:
Source:
Returns:

Datas of currently selected items

Type
Array.<string> | Array.<Object>

isAllowedData(data) → {boolean}

Check whether a given value is allowed to be added

Parameters:
Name Type Description
data string | Object

Requested value
Inherited From:
Source:
Returns:

Value is allowed

Type
boolean

isDisabled() → {boolean}

Check if the widget is disabled.

Inherited From:
Source:
Returns:

Widget is disabled

Type
boolean

isDuplicateData(data) → {boolean}

Check whether the given value is a duplicate of an existing tag already in the list.

Parameters:
Name Type Description
data string | Object

Requested value
Inherited From:
Source:
Returns:

Value is duplicate

Type
boolean

isElementAttached() → {boolean}

Check if the element is attached to the DOM

Inherited From:
Source:
Returns:

The element is attached to the DOM

Type
boolean

isValid() → {boolean}

Get the current valid state of the widget

Inherited From:
Source:
Returns:

Widget is valid

Type
boolean

isVisible() → {boolean}

Check if element is visible.

Inherited From:
Source:
Returns:

element is visible

Type
boolean

onChangeTags()

Respond to change event, where items were added, removed, or cleared.

Inherited From:
Source:

onInputBlur()

Respond to input blur event

Inherited From:
Source:

onInputChange()

Respond to input change event

Source:

onInputFocus()

Respond to input focus event

Overrides:
Source:

onMenuChoose(menuItem)

Respond to menu choose event

Parameters:
Name Type Description
menuItem OO.ui.OptionWidget

Chosen menu item
Source:

onMenuToggle(isVisible)

Respond to menu toggle event. Reset item highlights on hide.

Parameters:
Name Type Description
isVisible boolean

The menu is visible
Source:

onResize()

Respond to resize event

Source:

onTagNavigate(item, direction)

Respond to navigate event on the tag

Parameters:
Name Type Description
item OO.ui.TagItemWidget

Removed tag
direction string

Direction of movement; 'forwards' or 'backwards'
Inherited From:
Source:

onTagRemove(item)

Respond to tag remove event

Parameters:
Name Type Description
item OO.ui.TagItemWidget

Removed tag
Inherited From:
Source:

onTagSelect(item)

Respond to item select event

Parameters:
Name Type Description
item OO.ui.TagItemWidget

Selected item
Overrides:
Source:

removeTagByData(data)

Remove tag by its data property.

Parameters:
Name Type Description
data string | Object

Tag data
Inherited From:
Source:

(protected) restorePreInfuseState(state)

Restore the pre-infusion dynamic state for this widget.

This method is called after #$element has been inserted into DOM. The parameter is the return value of #gatherPreInfuseState.

Parameters:
Name Type Description
state Object
Inherited From:
Source:

scrollElementIntoView(configopt) → {jQuery.Promise}

Scroll element into view.

Parameters:
Name Type Attributes Description
config Object <optional>

Configuration options
Inherited From:
Source:
Returns:

Promise which resolves when the scroll is complete

Type
jQuery.Promise

setData(data)

Set element data.

Parameters:
Name Type Description
data Mixed

Element data
Inherited From:
Source:

setDisabled(disabled)

Set the 'disabled' state of the widget.

When a widget is disabled, it cannot be used and its appearance is updated to reflect this state.

Parameters:
Name Type Description
disabled boolean

Disable widget
Inherited From:
Source:

setElementGroup(group)

Set group element is in.

Parameters:
Name Type Description
group OO.ui.mixin.GroupElement | null

Group element, null if none
Inherited From:
Source:

setElementId(id)

Set the element has an 'id' attribute.

Parameters:
Name Type Description
id string
Inherited From:
Source:

setValue(valueObject)

Set the value of this widget by datas.

Parameters:
Name Type Description
valueObject string | Array.<string> | Object | Array.<Object>

An object representing the data and label of the value. If the widget allows arbitrary values, the items will be added as-is. Otherwise, the data value will be checked against allowedValues. This object must contain at least a data key. Example: { data: 'foo', label: 'Foo item' } For multiple items, use an array of objects. For example: [ { data: 'foo', label: 'Foo item' }, { data: 'bar', label: 'Bar item' } ] Value can also be added with plaintext array, for example: [ 'foo', 'bar', 'bla' ] or a single string, like 'foo'
Inherited From:
Source:

simulateLabelClick()

Simulate the behavior of clicking on a label (a HTML <label> element) bound to this input. HTML only allows <label> to act on specific "labelable" elements; complex widgets might need to override this method to provide intuitive, accessible behavior.

By default, this does nothing. OO.ui.mixin.TabIndexedElement overrides it for focusable widgets. Individual widgets may override it too.

This method is called by OO.ui.LabelWidget and OO.ui.FieldLayout. It should not be called directly.

Inherited From:
Source:

supports(methods) → {boolean}

Check if element supports one or more methods.

Parameters:
Name Type Description
methods string | Array.<string>

Method or list of methods to check
Inherited From:
Source:
Returns:

All methods are supported

Type
boolean

toggle(showopt)

Toggle visibility of an element.

Parameters:
Name Type Attributes Description
show boolean <optional>

Make element visible, omit to toggle visibility
Inherited From:
Source:
Fires:
  • event:visible

toggleValid(validopt)

Set the valid state of this item

Parameters:
Name Type Attributes Description
valid boolean <optional>

Item is valid
Inherited From:
Source:
Fires:

updateDisabled()

Update the disabled state, in case of changes in parent widget.

Inherited From:
Source:

updateThemeClasses()

Update the theme-provided classes.

Inherited From:
Source: