Class: SearchSelectView

SearchSelectView()

A select interface that allows the user to search from within the options, and optionally select multiple items. Also allows the items to be grouped, and to display an icon or image for each item.

Screenshot

Constructor

new SearchSelectView()

Since:
  • 2.14.0
Source:

Extends

  • Backbone.View

Members

ModelType :Backbone.Model

The constructor function for the model that this view uses. Must be a SearchSelect or an extension of it.
Type:
  • Backbone.Model
Since:
  • 2.31.0
Source:

className

Source:

tooltipSettings :object|boolean

Options and selected values for the search select interface show a tooltip with the description of the option when the user hovers over the option. This object is passed to the Formantic UI popup module to configure the tooltip. Set to false to disable tooltips.
Type:
  • object | boolean
Since:
  • 2.31.0
Source:
See:

type

Source:

Methods

addClickToTexts()

Because we've modified the text elements to be hoverable to show the tooltip, we needed to move them to a higher z-index which blocks the click action on the dropdown input element. This function ensures that the dropdown is shown when any part of the input is clicked, including the selected text elements in a single-select dropdown.
Since:
  • 2.31.0
Source:

addSeparator(el)

Add a separator before the given label element
Parameters:
Name Type Description
el HTMLElement The label element to add a separator before
Source:

addSeparators()

Add separators between labels in the dropdown if required
Source:

addTooltip(element, settings)

Add a tooltip to a given element using the description in the options object that's set on the view.
Parameters:
Name Type Description
element HTMLElement The HTML element a tooltip should be added
settings object Additional settings to override those set in view.tooltipSettings.
Source:

addTooltipsToSelectionEls()

Add tooltips to the selected labels or text elements
Source:

checkForInvalidSelections()

Show an error message if the user has selected an invalid value
Since:
  • 2.31.0
Source:

createIcon() → {HTMLElement}

Create the icon element for the select interface
Since:
  • 2.31.0
Source:
Returns:
The icon element
Type
HTMLElement

createInput() → {HTMLElement}

Create the hidden input element that will store the selected values
Since:
  • 2.31.0
Source:
Returns:
The input element
Type
HTMLElement

createLabel() → {HTMLElement|null}

Create the label for the search select interface
Since:
  • 2.31.0
Source:
Returns:
The label element, or null if no label is specified.
Type
HTMLElement | null

createMenu() → {OptionsView}

Create the dropdown menu for the select interface
Since:
  • 2.31.0
Source:
Returns:
The dropdown menu
Type
OptionsView

createModel(options)

Create a new SearchSelect model and set it on the view. If a model already exists, it will be destroyed.
Parameters:
Name Type Description
options object The options to pass to the model
Since:
  • 2.31.0
Source:

createPlaceholder() → {HTMLElement}

Create the placeholder element for the select interface
Since:
  • 2.31.0
Source:
Returns:
The placeholder element
Type
HTMLElement

createSelectContainer() → {HTMLElement}

Create the container for the select interface
Since:
  • 2.31.0
Source:
Returns:
The select container element
Type
HTMLElement

createSeparator() → {JQuery}

Create the HTML for a separator element to insert between two labels. The view.separatorClass is added to the separator element.
Since:
  • 2.15.0
Source:
Returns:
Returns the separator as a jQuery element
Type
JQuery

enable()

Visually indicate that the select interface is enabled
Source:

getLabels() → {Array.<HTMLElement>}

Source:
Returns:
The selected label elements in a multi-select dropdown
Type
Array.<HTMLElement>

getTexts() → {Array.<HTMLElement>}

Source:
Returns:
The selected text element in a single-select dropdown
Type
Array.<HTMLElement>

hideLoading()

Remove the loading spinner set by the showLoading
Source:

inactivate()

Visually indicate that the select interface is inactive
Source:

initialize()

Source:

listenToModel()

Update the view when certain model attributes change
Since:
  • 2.31.0
Source:

listenToSelectUI()

Listen to events from the select UI interface and update the model
Since:
  • 2.31.0
Source:

optionFromSelectionEl(el) → {SearchSelectOption|null}

Get the option model given a dropdown text or label element. Label elements are used for multi-select dropdowns, the value is a data attribute. Text elements are for single-select dropdowns, so the value is the current selection.
Parameters:
Name Type Description
el HTMLElement The text or label element
Since:
  • 2.31.0
Source:
Returns:
The option model or null if not found
Type
SearchSelectOption | null

removeAllSeparators()

Remove all messages from the view
Source:

removeMessages()

Remove all messages and classes set by the showMessage function
Source:

render()

Source:

renderSelectUI()

Initialize the dropdown interface
Source:

reset(silentopt, closeMenuopt)

Remove the selected values from the dropdown interface and from the model.
Parameters:
Name Type Attributes Description
silent boolean <optional>
 Set to true to prevent the dropdown and the model from triggering change events
closeMenu boolean <optional>
 Set to true to close the dropdown menu
Since:
  • 2.31.0
Source:

showInvalidSelectionError(opts)

Show a message indicated that some of the selected values are not valid choices.
Parameters:
Name Type Description
opts Array.<string> The values that are not valid choices
Source:

showLoading()

Visually indicate that dropdown options are loading
Source:

showMessage(message, type, removeOnChange)

Show an error, warning, or informational message, and highlight the select interface in an appropriate colour.
Parameters:
Name Type Description
message string The message to display. Use an empty string to only highlight the select interface without showing any message text.
type string one of "error", "warning", or "info"
removeOnChange boolean set to true to remove the message as soon as the user changes the selection
Source:

showSelected(silentopt)

Update the dropdown interface with the selected values from the model
Parameters:
Name Type Attributes Description
silent boolean <optional>
 Set to true to prevent the dropdown from triggering a change event (an infinite loop can occur if this is not set, as the dropdown will trigger a change event, which will update the model).
Since:
  • 2.31.0
Source:

splitModelViewOptions(options) → {object}

Split the options passed to the view into model and view attributes.
Parameters:
Name Type Description
options object The options passed to the view
Since:
  • 2.31.0
Source:
Returns:
An object with two keys: modelAttrs and viewAttrs
Type
object

tooltipHTML(option, _$element) → {string|null}

Create HTML for a tooltip for a given option. By default this method returns the description of the option, but can be overridden in extended SearchSelectViews to return a custom HTML string based on the option.
Parameters:
Name Type Description
option SearchSelectOption The option to create a tooltip for
_$element JQuery The element to attach the tooltip to
Since:
  • 2.31.0
Source:
Returns:
An HTML string to use for the content of the tooltip.
Type
string | null

updateMenuMode(forceopt)

Convert the submenu style to the style set in the model
Parameters:
Name Type Attributes Description
force boolean <optional>
 Set to true to force the view to update
Since:
  • 2.31.0
Source:

updateOptions(options)

Change the options available in the dropdown menu and re-render.
Parameters:
Name Type Description
options SearchSelectOptions The new options
Since:
  • 2.24.0
Source: