mmo-select
1 symbol · generated 30 Sep 2026
mmo-select
mmo-select.jhs:1Select element to display a list of options
- Extends
- CustomAPIElement
Index
| name | the name of the icon | |
| icon | the icon of the select | |
| readonly | if true, the select is readonly | |
| disabled | if true, the select is disabled | |
| value | the current value of the mmo-select (NOTE: can be any type, object included). | |
| required | if true, the select is required | |
| url | an url to a json api or a json stringify object: {collection, repository, filters} | |
| search | the current text being searched | |
| multiple | if true, the select is multiple | |
| enum | the enum of the select | |
| placeholder | the placeholder of the select | |
| ViewDefault static readonly accessor | ||
| data accessor | Set the data of the select | |
| disabled accessor | Get the disabled of the select | |
| readonly accessor | Get the readonly of the select | |
| required accessor | Get the required of the select | |
| enum accessor | Get the enum of the select | |
| multiple accessor | Get the multiple of the select | |
| validationMessage accessor | Get the validation message of the select | |
| validity readonly accessor | Get the validity of the select | |
| willValidate readonly accessor | Check if the select will validate | |
| value accessor | Get the value of the select | |
| search accessor | Get the search of the select | |
| constructor() | ||
| init() | ||
| focus() | Focus the input element | |
| hasInput() | Check if the select has an input | |
| isDropdown() | Check if the select is a dropdown | |
| isMultiple() | Check if the select is multiple | |
| checkValidity() | Check the validity of the select | |
| isSameValue(value, search, multiple) | Check if search is contained or is the same value as value As entities cannot be compared, if the value is an entity, we check if their uid is the same | |
| clear() | Clear the value of the select | |
| setValueByIndex(group, index) | Set the value of the select by index | |
| setValueByNode(node) | Set the value of the select by node | |
| addGroup(id, label) | Add a group for options | |
| addOption(value, label, group) | Add option | |
| removeOption(value) | Remove an option from the select | |
| removeGroup(group) | Remove a group from the select | |
| setOptions(options, group) | Set options for a specific group | |
| getOptions(group) | Get the options of a specific group from the select | |
| clearOptions() | Clear all options of the select | |
| clearSearch() | Clear the search of the select | |
| select(index) | Select an element (but don't set the value) | |
| toggleSelectAll() | Toggle the select all of the select | |
| updatePosition() | Update the position of the select | |
| show(event) | Show select close to its input | |
| isShown() | Check if the select is shown | |
| hide() | Hide hintbox | |
| eventClick(event) | On click event | |
| eventInput(event) | On input event | |
| eventKey(event) | On key event | |
| .with-input | show the input search | |
| .dropdown | show the options like a dropdown | |
| .anchor-top | the list opens upwards, for a control near the bottom of the screen | |
| .rounded | add a border radius to the select | |
| .searching | add a border to the select | |
| .floating | displays the select as a floating element | |
| .compact | reduce the gap between the options |
Attributes11
name
mmo-select.jhsthe name of the icon
name
icon
mmo-select.jhsthe icon of the select
icon
readonly
mmo-select.jhsif true, the select is readonly
readonly
disabled
mmo-select.jhsif true, the select is disabled
disabled
value
mmo-select.jhsthe current value of the mmo-select (NOTE: can be any type, object included). It CAN be different of the value in the input.
value
required
mmo-select.jhsif true, the select is required
required
url
mmo-select.jhsan url to a json api or a json stringify object: {collection, repository, filters}
url
search
mmo-select.jhsthe current text being searched
search
multiple
mmo-select.jhsif true, the select is multiple
multiple
enum
mmo-select.jhsthe enum of the select
enum
placeholder
mmo-select.jhsthe placeholder of the select
placeholder
Properties12
ViewDefault
staticreadonlyaccessormmo-select.jhs:40data
accessormmo-select.jhs:118Set the data of the select
disabled
accessormmo-select.jhs:146Get the disabled of the select
- Type
boolean
readonly
accessormmo-select.jhs:163Get the readonly of the select
- Type
boolean
required
accessormmo-select.jhs:180Get the required of the select
- Type
boolean
enum
accessormmo-select.jhs:197Get the enum of the select
- Type
array
multiple
accessormmo-select.jhs:255Get the multiple of the select
- Type
boolean
validationMessage
accessormmo-select.jhs:282Get the validation message of the select
- Type
string
validity
readonlyaccessormmo-select.jhs:298Get the validity of the select
- Type
object
willValidate
readonlyaccessormmo-select.jhs:319Check if the select will validate
- Type
boolean
value
accessormmo-select.jhs:366Get the value of the select
- Type
array|*
search
accessormmo-select.jhs:646Get the search of the select
- Type
string
Methods28
constructor()
mmo-select.jhs:47init()
mmo-select.jhs:60focus()
mmo-select.jhs:109Focus the input element
hasInput()
mmo-select.jhs:239Check if the select has an input
| returns | boolean | true if the select has an input |
isDropdown()
mmo-select.jhs:247Check if the select is a dropdown
| returns | boolean | true if the select is a dropdown |
isMultiple()
mmo-select.jhs:274Check if the select is multiple
| returns | boolean | true if the select is multiple |
checkValidity()
mmo-select.jhs:327Check the validity of the select
| returns | boolean | true if the select is valid |
isSameValue(value, search, multiple)
mmo-select.jhs:342Check if search is contained or is the same value as value As entities cannot be compared, if the value is an entity, we check if their uid is the same
| value | Array | * | the current select's value (a list if multiple) |
| search | * | the new value to look for |
| multiple = false | ||
| returns | boolean | true |
clear()
mmo-select.jhs:357Clear the value of the select
setValueByIndex(group, index)
mmo-select.jhs:420Set the value of the select by index
| group | string | - The group of the select |
| index | number | - The index of the select |
setValueByNode(node)
mmo-select.jhs:466Set the value of the select by node
| node | Element | - The node of the select |
| returns | boolean | true if the value is set by node |
addGroup(id, label)
mmo-select.jhs:490Add a group for options
| id | string | |
| label = null | ?(string | Node | MMO.core.dom.Html) | the group's header, the id when there is none: text unless it is a node (MMO.core.dom.appendChildren), markup you wrote goes through MMO.core.dom.html() |
| returns |
addOption(value, label, group)
mmo-select.jhs:522Add option
| value | * | any value to use as the value |
| label = null | ?(string | Node | NodeList | MMO.core.dom.Html) | what the option shows, the value when there is none: text unless it is a node (MMO.core.dom.appendChildren) -- an entity's title from the api shows as it was typed. Markup you wrote goes through MMO.core.dom.html() |
| group = null | string | Element | an id for a group |
| returns | the node created |
removeOption(value)
mmo-select.jhs:555Remove an option from the select
| value |
removeGroup(group)
mmo-select.jhs:573Remove a group from the select
| group | string | - The group of the select |
setOptions(options, group)
mmo-select.jhs:586Set options for a specific group
| options | Array | [[value, label]], addOption |
| group = null | string |
getOptions(group)
mmo-select.jhs:605Get the options of a specific group from the select
| group | string | - The group of the select |
| returns | array | The options of the select |
clearOptions()
mmo-select.jhs:618Clear all options of the select
clearSearch()
mmo-select.jhs:631Clear the search of the select
select(index)
mmo-select.jhs:685Select an element (but don't set the value)
| index | number | Element | null | if an element, will figure out the correct current index |
| returns | void |
toggleSelectAll()
mmo-select.jhs:721Toggle the select all of the select
updatePosition()
mmo-select.jhs:741Update the position of the select
show(event)
mmo-select.jhs:777Show select close to its input
| event = null | Event | - The event |
| returns | void |
isShown()
mmo-select.jhs:827Check if the select is shown
| returns | boolean | true if the select is shown |
hide()
mmo-select.jhs:835Hide hintbox
| returns | void |
eventClick(event)
mmo-select.jhs:858On click event
| event | Event | - The event |
| returns | void |
eventInput(event)
mmo-select.jhs:882On input event
| event | Event | - The event |
| returns | void |
eventKey(event)
mmo-select.jhs:891On key event
| event | Event | - The event |
| returns | void |
CSS hooks7
.with-input
mmo-select.jhsshow the input search
.with-input
.dropdown
mmo-select.jhsshow the options like a dropdown
.dropdown
.anchor-top
mmo-select.jhsthe list opens upwards, for a control near the bottom of the screen
.anchor-top
.rounded
mmo-select.jhsadd a border radius to the select
.rounded
.searching
mmo-select.jhsadd a border to the select
.searching
.floating
mmo-select.jhsdisplays the select as a floating element
.floating
.compact
mmo-select.jhsreduce the gap between the options
.compact