Search box-IoT Studio(IoT Studio)-阿里云帮助中心

The search box component lets users enter text to search for information in large datasets. This topic explains how to configure the component.

Step 1: Add the component

Create a mobile application. For more information, see Create a mobile application.
In the mobile application editor, click the Components icon on the far left.
(Optional) Add a column component to set the page layout. For more information, see Horizontal columns and vertical columns.
Above the component list on the left of the canvas, enter Search box in the search box to find the component. Then, drag it onto the canvas.

For more information about adding a component, see Add a component.

After adding the component, the Style panel on the right displays the search box properties, including Default prompt (default: "Please enter"), Character limit (default: 30), and Show clear button.

In the Style panel on the right side of the mobile application editor, configure the search box's size, default prompt, character limit, and the option to show the clear button.

Note
If you select the Show clear button checkbox, a clear button appears on the right side of the search box at runtime when you enter text.
Adjust the component's dimensions and position on the page. For more information, see General styles.

In the Interaction panel on the right of the mobile application editor, click Add Interaction and set the Event and Action.

This component supports the Value Change event. For example, when the component value changes, you can run the set device properties action to send a command to a device and update a property value on that device.

For more information, see Interaction configuration.
Preview and debug the component's data display and style. For more information, see Preview and debug.