Select Library: How to Use Data Sources

Last updated: 4 months ago

Category: Examples

The Select module enables single and multiple selection, perfectly replacing the native select-single and select-multiple components; it supports fuzzy search and auto-completion.

Simple Grouping

The native select element includes the grouping node optgroup which can be directly used to implement simple two-level grouping.

Using Complete Structure Trees

When writing data on list nodes:

Using Plain Text Data

Multiple option texts separated by English commas.

Using Simple Array Data

Simple string arrays can be used directly.

Using Detailed Array Data

When creating instances, the following data properties can be used:

Using Script Tags to Pass Data

If you don't want to use the new+id approach but still need to pass more data through nodes, you can use script tags within the oc-select tag and write the data in standard JavaScript format.

You can also write data directly in HTML format within the target node without using script tags, though this approach is less elegant.

contType Parameter

When the content parameter value is of string type, the data source method depends on the contType parameter:

• When content='#id', it means reading menu data from ul or ol nodes in the page - contType should be set to html
• When content='http://xxx.xxx.com/xxx.json', it means reading menu data asynchronously - contType should be set to async (content can be a JSON file address or dynamic page address like PHP or Java)

Other cases where content is Function, Promise, AsyncFunction, Object,Array or HTMLElement will be automatically recognized.

Using Asynchronous JSON Data

Using Asynchronous SQL Data

You can click here to download the database SQL file.

Using Node Data

There are two ways to use node data for content:

Content as Function

Allows content type to be a function, which should return a tree array or flat array.

Content as Promise

Allows content type to be Promise, where the resolve parameter should be a tree array or flat array.

Content as AsyncFunction

Allows content type to be AsyncFunction, where async should return a Promise and the resolve parameter should be a tree array or flat array.

Data Structure

After instance initialization, the initial data is automatically processed into structured tree data, with each item containing basic properties:

Additionally, after instantiation, the raw data will automatically include structural relationship properties (id, pId, path, floor) and node properties: