Home›Docs›Form›Search Component

Search Component

Last updated: 4 months ago

Category: Form

The search component implements common search form fields, supports nesting various custom form fields, and features autocomplete functionality.

Search Component4 months ago CSS Filter4 months ago

Preface

The search component is implemented based on the oc-fields component and the Autocomplete module. It uses oc-search as the node name to wrap the oc-fields node, allowing free editing of child node attributes to meet diverse requirements.

Basic Usage

The built-in oc-fields component can use single-line form fields in any combination to achieve a "text field + button" search interface.

Output
HTML

```
                
                
            
```

Full Width

Using the full attribute allows the component to horizontally fill its container.

Output
HTML

```
                
                
            
```

Toolbox

The toolbox is constructed using the createTools function and can be inserted in a fixed HTML format. The toolbox can be placed either before or after other elements. It can also be directly written on the oc-input component.

Size

Set the size via the size attribute, with available values: sm, md (default), and lg.

Output
HTML

```
                
                
            
```

Icon Placeholder

After setting the iconholder attribute on the oc-input node, you can set the placeholder attribute with an icon system name to display an icon placeholder.

For example, if the icon class name is _icon-search, then the placeholder should be search, omitting _icon-.

Output
HTML

```
                
                
            
```

Border Shape

This component has small rounded corners by default. If needed, you can set the shape attribute to have square or large rounded corners.

Autocomplete

Use the oc-autocomplete attribute on the main input control to enable autocomplete functionality.

Traditional Form Submission

Wrap the oc-search node with a form node and use the click event on the oc-btn node to trigger the form's submit event for form submission.

Output
HTML

```
                
                
            
```

Using Form Submission Tools

This framework includes a form submission tool formTools.submit, which can handle both traditional and asynchronous form submissions.

Prominent Style

Add the notable attribute to make the search bar display in the primary color for prominence.

Output
HTML

```
                
                
            
```

Attributes

Attribute	Type	Options	Default	Description
disabled	boolean	-	-	Whether disabled
full	boolean	-	-	Full width display
notable	boolean	-	-	Prominent display
size	string	'sm'/'md'/'lg'	'md'	Size
label	string	-	-	Title
shape	string	'radius'/'round'/'square'	'radius'	Border shape

Common Methods

Common component methods:

set: Set properties (takes key-value pairs or array)
reset: Reset properties (no params)
clear: Clear properties and values (no params)

Basic usage: CompElem.reset()

Common Events

Common component events:

connected: Component connected (no params)
disconnected: Component disconnected (no params)
adopted: Component moved (no params)
set: Property set (receives value)
cleared: Property cleared (no params)
reset: Property reset (no params)

Basic usage: CompElem.on('connected',()=>{console.log('connected')})

Editor Component: Additional Data Sources, Events, and Methods Demo Examples

4 months ago

Fields Component