1# Search 2 3搜索框组件，适用于浏览器的搜索内容输入框等应用场景。 4 5> **说明：** 6> 7> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9## 子组件 10 11无 12 13## 接口 14 15Search(options?: { value?: string; placeholder?: string; icon?: string; controller?: SearchController }) 16 17**参数：** 18 19| 参数名 | 参数类型 | 必填 | 参数描述 | 20| ----------- | ---------------- | ---- | ------------------------------------------------------------ | 21| value | string | 否 | 设置当前显示的搜索文本内容。 | 22| placeholder | string | 否 | 设置无输入时的提示文本。 | 23| icon | string | 否 | 设置搜索图标路径，默认使用系统搜索图标，图标支持的图源格式: svg、jpg和png。 | 24| controller | SearchController | 否 | 设置Search组件控制器。 | 25 26## 属性 27 28| 名称 | 参数类型 | 描述 | 29| ---------------- | ------------------------------------------- | ---------------------------------------------------------- | 30| searchButton | string | 搜索框末尾搜索按钮文本内容，默认无搜索按钮。 | 31| placeholderColor | [ResourceColor](ts-types.md#resourcecolor8) | 设置placeholder文本颜色。 | 32| placeholderFont | [Font](ts-types.md#font) | 设置placeholder文本样式。 | 33| textFont | [Font](ts-types.md#font) | 设置搜索框内输入文本样式。 | 34| textAlign | [TextAlign](ts-appendix-enums.md#textalign) | 设置文本在搜索框中的对齐方式。<br/>默认值：TextAlign.Start | 35 36## 事件 37 38除支持[通用事件](ts-universal-events-click.md)外，还支持以下事件： 39 40| 名称 | 功能描述 | 41| ------------------------------------------- | ------------------------------------------------------------ | 42| onSubmit(callback: (value: string) => void) | 点击搜索图标、搜索按钮或者按下软键盘搜索按钮时触发该回调。<br/> -value: 当前搜索框中输入的文本内容。 | 43| onChange(callback: (value: string) => void) | 输入内容发生变化时，触发该回调。<br/> -value: 当前搜索框中输入的文本内容。 | 44| onCopy(callback: (value: string) => void) | 长按搜索框弹出剪切板之后，点击剪切板的复制按钮触发该回调。<br> -value: 复制的文本内容。 | 45| onCut(callback: (value: string) => void) | 长按搜索框弹出剪切板之后，点击剪切板的剪切按钮触发该回调<br> -value: 剪切的文本内容。 | 46| onPaste(callback: (value: string) => void) | 长按搜索框弹出剪切板之后，点击剪切板的粘贴按钮触发该回调。<br> -value: 粘贴的文本内容。 | 47 48## SearchController 49 50Search组件的控制器，目前通过它可控制Search组件的光标位置。 51 52### 导入对象 53``` 54controller: SearchController = new SearchController() 55``` 56### caretPosition 57 58caretPosition(value: number): void 59 60设置输入光标的位置。 61 62**参数：** 63 64| 参数名 | 参数类型 | 必填 | 参数描述 | 65| ------ | -------- | ---- | ---------------------------------- | 66| value | number | 是 | 从字符串开始到光标所在位置的长度。 | 67 68 69## 示例 70 71```ts 72// xxx.ets 73@Entry 74@Component 75struct SearchExample { 76 @State changeValue: string = ''; 77 @State submitValue: string = ''; 78 controller: SearchController = new SearchController(); 79 80 build() { 81 Column() { 82 Text('onSubmit:' + this.submitValue).fontSize(18).margin(15) 83 Text('onChange:' + this.changeValue).fontSize(18).margin(15) 84 Search({ value: this.changeValue, placeholder: 'Type to search...', controller: this.controller }) 85 .searchButton('SEARCH') 86 .width(400) 87 .height(40) 88 .backgroundColor(Color.White) 89 .placeholderColor(Color.Grey) 90 .placeholderFont({ size: 14, weight: 400 }) 91 .textFont({ size: 14, weight: 400 }) 92 .onSubmit((value: string) => { 93 this.submitValue = value; 94 }) 95 .onChange((value: string) => { 96 this.changeValue = value; 97 }) 98 .margin(20) 99 Button('Set caretPosition 1') 100 .onClick(() => { 101 // 设置光标位置到输入的第一个字符后 102 this.controller.caretPosition(1); 103 }) 104 }.width('100%') 105 } 106} 107``` 108
