1# search 2<!--Kit: ArkUI--> 3<!--Subsystem: ArkUI--> 4<!--Owner: @kangshihui--> 5<!--Designer: @pssea--> 6<!--Tester: @jiaoaozihao--> 7<!--Adviser: @HelloCrease--> 8 9> **说明：** 10> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 11 12提供搜索框组件，用于提供用户搜索内容的输入区域。 13 14 15## 子组件 16 17不支持。 18 19 20## 属性 21 22除支持[通用属性](js-components-common-attributes.md)外，还支持如下属性： 23 24| 名称 | 类型 | 默认值 | 必填 | 描述 | 25| ------------------------- | ----------------------- | ---- | ---- | --------------------------------- | 26| icon | string | - | 否 | 搜索图标，默认使用系统搜索图标，图标格式为svg，jpg和png。 | 27| hint | string | - | 否 | 搜索提示文字。 | 28| value | string | - | 否 | 搜索框搜索文本值。 | 29| searchbutton<sup>5+</sup> | string | - | 否 | 搜索框末尾搜索按钮文本值。 | 30| menuoptions<sup>5+</sup> | Array<MenuOption> | - | 否 | 设置文本选择弹框点击更多按钮之后显示的菜单项。 | 31 32**表1** MenuOption<sup>5+</sup> 33 34| 名称 | 类型 | 描述 | 35| ------- | ------ | ----------- | 36| icon | string | 菜单选项中的图标路径。 | 37| content | string | 菜单选项中的文本内容。 | 38 39 40## 样式 41 42除支持[通用样式](js-components-common-styles.md)外，还支持如下样式： 43 44| 名称 | 类型 | 默认值 | 必填 | 描述 | 45| ------------------------ | -------------------------- | --------------- | ---- | ---------------------------------------- | 46| color | <color> | \#e6000000 | 否 | 搜索框的文本颜色。 | 47| font-size | <length> | 16px | 否 | 搜索框的文本尺寸。 | 48| allow-scale | boolean | true | 否 | 搜索框的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。true表示跟随系统放大缩小，false表示不跟随系统放大缩小。<br/>如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。 | 49| placeholder-color | <color> | \#99000000<br/> | 否 | 搜索框的提示文本颜色。 | 50| font-weight | number \| string | normal | 否 | 搜索框的字体粗细，见text组件[font-weight](js-components-basic-text.md#样式)的样式属性。 | 51| font-family | string | sans-serif | 否 | 搜索框的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](js-components-common-customizing-font.md)指定的字体，会被选中作为文本的字体。 | 52| caret-color<sup>6+</sup> | <color> | - | 否 | 设置输入光标的颜色。 | 53 54 55## 事件 56 57除支持[通用事件](js-components-common-events.md)外，还支持如下事件： 58 59| 名称 | 参数 | 描述 | 60| ------------------------- | ---------------------------------------- | ---------------------------------------- | 61| change | { text:newText } | 输入内容发生变化时触发。<br/>改变value属性值不会触发该回调。 | 62| submit | { text:submitText } | 点击搜索图标、搜索按钮<sup>5+</sup>或者按下软键盘搜索按钮时触发。 | 63| translate<sup>5+</sup> | { value: selectedText } | 设置此事件后，进行文本选择操作后文本选择弹窗会出现翻译按钮，点击翻译按钮之后，触发该回调，返回选中的文本内容。 | 64| share<sup>5+</sup> | { value: selectedText } | 设置此事件后，进行文本选择操作后文本选择弹窗会出现分享按钮，点击分享按钮之后，触发该回调，返回选中的文本内容。 | 65| search<sup>5+</sup> | { value: selectedText } | 设置此事件后，进行文本选择操作后文本选择弹窗会出现搜索按钮，点击搜索按钮之后，触发该回调，返回选中的文本内容。 | 66| optionselect<sup>5+</sup> | { index:optionIndex, value: selectedText } | 文本选择弹窗中设置menuoptions属性后，用户在文本选择操作后，点击菜单项后触发该回调，返回点击的菜单项序号和选中的文本内容。 | 67 68 69## 方法 70 71支持[通用方法](js-components-common-methods.md)。 72 73 74## 示例 75 76```html 77<!-- xxx.hml --> 78<div class="container"> 79 <search hint="请输入搜索内容" searchbutton="搜索" @search="search"> 80 </search> 81</div> 82``` 83 84```css 85/* xxx.css */ 86.container { 87 display: flex; 88 justify-content: center; 89 align-items: center; 90} 91``` 92 93 94
