Select Component: Feature and Functionality Demo Examples
Category: ExamplesThe select component supports both single and multiple selection, perfectly replacing native select-single and select-multiple components; it features fuzzy search and auto-completion.
Manual Selection
Use the manual attribute to enable manual selection mode. Compared with non-manual mode, manual selection has these characteristics:
Disabling Dropdown List
Enabling Search
Use the search attribute to enable searching within the dropdown list.
Enabling Status Bar
Use the status attribute to display a status bar in the dropdown list.
Current Values
You can access component properties like native HTML elements including name, value and disabled.
Setting Attribute Values
To set values, use the setAttribute method to update the value property. Other attributes can also be set this way.
Updating Component
Setting name, value, disabled or size attributes won't trigger reinitialization. Setting any other attributes will reinitialize the component (recreate wrap node content).
Operation Methods
Built-in common methods include reset(), clear(), and set(data), along with input-specific blur and focus methods. Based on these methods, the component provides corresponding listener events.
Using Cache
When modifying element properties or values, if you need to cache data to restore previous properties and values when reloading the page, use the stor-name attribute. However, ensure this attribute value is unique in the browser cache.
Event Listening
Supports using addEventListener to subscribe to input, change, focus and blur events. The on+event syntax is also supported.
Since passing parameters with addEventListener is cumbersome, an additional set of listener events is provided.