1# search
2
3>  **NOTE**
4>
5>  This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
6
7The **\<search>** component provides an input area for users to search.
8
9
10## Child Components
11
12Not supported
13
14
15## Attributes
16
17In addition to the [universal attributes](js-components-common-attributes.md), the following attributes are supported.
18
19| Name                       | Type                     | Default Value | Mandatory  | Description                               |
20| ------------------------- | ----------------------- | ---- | ---- | --------------------------------- |
21| icon                      | string                  | -    | No   | Search icon. By default, the system search icon is used. The supported icon format is SVG, JPG, and PNG.|
22| hint                      | string                  | -    | No   | Hint text.                          |
23| value                     | string                  | -    | No   | Text in the search box.                        |
24| searchbutton<sup>5+</sup> | string                  | -    | No   | Text on the search button at the end of the search box.                    |
25| menuoptions<sup>5+</sup>  | Array&lt;MenuOption&gt; | -    | No   | Menu options displayed after users click the **More** button.          |
26
27**Table 1** MenuOption<sup>5+</sup>
28
29| Name     | Type    | Description         |
30| ------- | ------ | ----------- |
31| icon    | string | Path of the icon for a menu option.|
32| content | string | Text content of a menu option.|
33
34
35## Styles
36
37In addition to the [universal styles](js-components-common-styles.md), the following styles are supported.
38
39| Name                      | Type                        | Default Value            | Mandatory  | Description                                      |
40| ------------------------ | -------------------------- | --------------- | ---- | ---------------------------------------- |
41| color                    | &lt;color&gt;              | \#e6000000      | No   | Font color of the search box.                               |
42| font-size                | &lt;length&gt;             | 16px            | No   | Font size of the search box.                               |
43| allow-scale              | boolean                    | true            | No   | Whether the font size changes with the system's font size settings.<br>If the **config-changes** tag of **fontSize** is configured for abilities in the **config.json** file, the setting takes effect without application restart.|
44| placeholder-color        | &lt;color&gt;              | \#99000000<br>| No   | Color of the hint text.                             |
45| font-weight              | number \| string | normal          | No   | Font weight. For details, see [font-weight](js-components-basic-text.md#styles) of the **\<text>** component.|
46| font-family              | string                     | sans-serif      | No   | Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font in the family or the specified [custom font](js-components-common-customizing-font.md) is used for the text.|
47| caret-color<sup>6+</sup> | &lt;color&gt;              | -               | No   | Color of the caret.                              |
48
49
50## Events
51
52In addition to the [universal events](js-components-common-events.md), the following events are supported.
53
54| Name                       | Parameter                                      | Description                                      |
55| ------------------------- | ---------------------------------------- | ---------------------------------------- |
56| change                    | { text:newText }               | Triggered when the content entered in the text box changes.<br>If you change the **value** attribute directly, this event will not be triggered.     |
57| submit                    | { text:submitText }            | Triggered when users click the search icon or the search button<sup>5+</sup>, or tap the search button on a soft keyboard. |
58| translate<sup>5+</sup>    | { value: selectedText }   | Triggered when users click the translate button in the menu displayed after they select a text segment. The selected text content is returned.|
59| share<sup>5+</sup>        | { value: selectedText }   | Triggered when users click the share button in the menu displayed after they select a text segment. The selected text content is returned.|
60| search<sup>5+</sup>       | { value: selectedText }   | Triggered when users click the search button in the menu displayed after they select a text segment. The selected text content is returned.|
61| optionselect<sup>5+</sup> | { index:optionIndex, value: selectedText } | Triggered when users click a menu option in the menu displayed after they select a text segment. This event is valid only when the **menuoptions** attribute is set. The option index and selected text content are returned.|
62
63
64## Methods
65
66The [universal methods](js-components-common-methods.md) are supported.
67
68
69## Example
70
71```html
72<!-- xxx.hml -->
73<div class="container">
74    <search hint="Enter keywords" searchbutton="Search" @search="search">
75  </search>
76</div>
77```
78
79```css
80/* xxx.css */
81.container {
82  display: flex;
83  justify-content: center;
84  align-items: center;
85}
86```
87
88![en-us_image_0000001153427082](figures/en-us_image_0000001153427082.png)
89