1# AtomicServiceSearch 2 3**AtomicServiceSearch** allows you to customize the default search area, customizable selection area, and function area (a maximum of two). 4 5> **NOTE** 6> 7> This component is supported since API version 18. Updates will be marked with a superscript to indicate their earliest API version. 8 9 10## Modules to Import 11 12``` 13import { AtomicServiceSearch } from '@kit.ArkUI'; 14``` 15 16 17## AtomicServiceSearch 18```ts 19AtomicServiceSearch({ 20 value?: ResourceStr, 21 placeholder?: ResourceStr, 22 controller?: SearchController, 23 select?: SelectParams, 24 search?: SearchParams, 25 operation?: OperationParams, 26}) 27``` 28 29**Atomic service API**: This API can be used in atomic services since API version 18. 30 31**Decorator**: @Component 32 33**System capability**: SystemCapability.ArkUI.ArkUI.Full 34 35**Parameters** 36 37| Name | Type | Mandatory| Decorator| Description | 38| ----------- | :--------------- | ---- | ---------- | ------------------------------------------------------------ | 39| value | [ResourceStr](ts-types.md#resourcestr) | No| @Prop | Text input in the search text box. The default value is an empty string.| 40| placeholder | [ResourceStr](ts-types.md#resourcestr) | No| @Prop | Default prompt text displayed in the search box. The default value is **Search**.| 41| controller | [SearchController](ts-basic-components-search.md#searchcontroller) | No | - | Native **Search** component controller, which is used to set the position of the input cursor and exit the editing state. The default value is **undefined**.| 42| select | [SelectParams](#selectparams) | No| @Prop | Content, event, and style of the selection area. The default value is **undefined**.| 43| search | [SearchParams](#searchparams) | No| @Prop | Events and styles supported by the search area. The default value is **undefined**.| 44| operation | [OperationParams](#operationparams) | No| - | Function setting items on the right of the selection area. The default value is **undefined**.| 45 46 47## SelectParams 48 49Provides optional attributes for the selection area. 50 51**Atomic service API**: This API can be used in atomic services since API version 18. 52 53**System capability**: SystemCapability.ArkUI.ArkUI.Full 54 55| Name | Type | Mandatory | Description | 56| ----------------------- | -------------------------------------------- | ------------------------------------------------------------ | ---- | 57| options | Array<[SelectOption](ts-basic-components-select.md#selectoption)> | No| Value of an option in the drop-down menu. The default value is **undefined**.| 58| selected | number| No| Index of the initially selected item in the drop-down list box. The index of the first item is 0. If this attribute is not set, the default value **-1** is used, indicating that the option is not selected.| 59| selectValue | [ResourceStr](ts-types.md#resourcestr) | No| Text content of the drop-down list button itself. The default value is **undefined**.| 60| onSelect | [OnSelectCallback](#onselectcallback) | No| Callback invoked when an item in the drop-down list box is selected. The default value is **undefined**.| 61| menuItemContentModifier | [ContentModifier\<MenuItemConfiguration>](ts-basic-components-select.md#menuitemconfiguration12)| No| Content modifier to apply to the drop-down list box.<br>**modifier**: content modifier. You need a custom class to implement the **ContentModifier** API. The default value is **undefined**.| 62| divider | [Optional](ts-universal-attributes-custom-property.md#optional12)<[DividerOptions](ts-basic-components-textpicker.md#divideroptions12)> \| null | No| Divider options.<br>1. If **DividerOptions** is set, the divider is displayed in the configured style. Default value: **{strokeWidth: '1px', color: '#33182431'}**<br>2. If this parameter is set to **null**, the divider is not displayed.<br>3. If the value of **strokeWidth** is too larger, the divider may overlap the text. The divider extends both upwards and downwards from the bottom of each item.<br>4. The default values for **startMargin** and **endMargin** are consistent with the style of the divider when the **divider** attribute is not set. If the sum of **startMargin** and **endMargin** is equal to the value of **optionWidth**, the divider is not displayed. If the sum of **startMargin** and **endMargin** exceeds the value of **optionWidth**, the divider line is displayed in the default style.| 63| font | [Font](ts-types.md#font) | No| Text font of the drop-down list button. Default value: **{size: $r('sys.float.ohos_id_text_size_body1')}**| 64| fontColor | [ResourceColor](ts-types.md#resourcecolor) | No| Font color of the selected option in the drop-down list box. Default value: **{fontColor: $r('sys.color.ohos_id_color_text_primary')}** | 65| selectedOptionBgColor | [ResourceColor](ts-types.md#resourcecolor) | No| Background color of the selected option in the drop-down list box. Default value: **$r('sys.color.ohos_id_color_component_activated')** with the opacity of **$r('sys.color.ohos_id_alpha_highlight_bg')**| 66| selectedOptionFont | [Font](ts-types.md#font) | No| Text font of the selected option in the drop-down list box. Default value: **{size: $r('sys.color.ohos_id_text_size_body1'), weight: FontWeight.Regular}**| 67| selectedOptionFontColor | [ResourceColor](ts-types.md#resourcecolor) | No| Font color of the selected option in the drop-down list box. Default value: **$r('sys.color.ohos_id_color_text_primary_activated')**| 68| optionBgColor | [ResourceColor](ts-types.md#resourcecolor) | No| Background color of an option in the drop-down list box. Default value: **Color.Transparent**| 69| optionFont | [Font](ts-types.md#font) | No| Text font of options in the drop-down list box. Default value: **{size: $r('sys.float.ohos_id_text_size_body1'), weight: FontWeight.Regular}**| 70| optionFontColor | [ResourceColor](ts-types.md#resourcecolor) | No| Font color of an option in the drop-down list box. Default value: **$r('sys.color.ohos_id_color_text_primary')**| 71| optionWidth | [Dimension](ts-types.md#dimension10) \| [OptionWidthMode](ts-appendix-enums.md#optionwidthmode11) | No| Option width in the drop-down list box. This attribute cannot be set in percentage. **OptionWidthMode** is of the enum type and it determines whether the drop-down list box inherits the width of the drop-down list button. If an invalid value or a value less than the minimum width of 56 vp is set, the attribute does not take effect, and the option width uses the default value, which is two columns.| 72| optionHeight | [Dimension](ts-types.md#dimension10) | No| Maximum height for the option in the drop-down list box. This attribute cannot be set in percentage. The default maximum height is 80% of the available height of the screen. The maximum height set cannot exceed the default maximum height.| 73| space | [Length](ts-types.md#length) | No| Spacing between the text and arrow of an option. Default value: **8**| 74| arrowPosition | [ArrowPosition](ts-basic-components-select.md#arrowposition10)| No| Alignment between the text and arrow of an option. Default value: **ArrowPosition.END**| 75| menuAlign | [MenuAlignParams](#menualignparams) | No| Alignment between the drop-down list button and the drop-down list box. Default value: **{alignType: MenuAlignType.START, offset: {dx: 0, dy: 0}}**| 76| menuBackgroundColor | [ResourceColor](ts-types.md#resourcecolor) | No| Background color of the drop-down list box. Default value: **Color.Transparent** | 77| menuBackgroundBlurStyle | [BlurStyle](ts-universal-attributes-background.md#blurstyle9) | No| Background blur style of the drop-down list box. Default value: **BlurStyle.COMPONENT_ULTRA_THICK**| 78 79 80## SearchParams 81 82Sets optional attributes for the search area. 83 84**Atomic service API**: This API can be used in atomic services since API version 18. 85 86**System capability**: SystemCapability.ArkUI.ArkUI.Full 87 88| Name | Type | Mandatory | Description | 89| ------------------------ | ---------------------------------------------- | ------------------------------------------------------------ | ---- | 90| searchKey | [ResourceStr](ts-types.md#resourcestr) | No| Search key used to find a unique **search** component. Default value: **undefined** | 91| componentBackgroundColor | [ResourceColor](ts-types.md#resourcecolor) | No| Background color of a component. Default value: **$r('sys.color.ohos_id_color_text_field_sub_bg')** | 92| pressedBackgroundColor | [ResourceColor](ts-types.md#resourcecolor) | No| Background color of the pressed component. Default value: **$r('sys.color.ohos_id_color_click_effect')**| 93| searchButton | [SearchButtonParams](#searchbuttonparams) | No| Search button located next to the search text box. Clicking the search button triggers both **onSubmit** and **onClick** callbacks.<br>- **value**: Text on the search button located next to the search text box.<br> - **option**: Font of the search text box. Default value: **{fontSize: '16fp', fontColor: '#ff3f97e9'}**| 94| placeholderColor | [ResourceColor](ts-types.md#resourcecolor) | No| Placeholder text color. Default value: **$r('sys.color.ohos_id_color_text_secondary')** | 95| placeholderFont | [Font](ts-types.md#font) | No| Placeholder text style, including the font size, font weight, font family, and font style. Default value: **{size: $r('sys_float.ohos_id_text_size_body1')}**| 96| textFont | [Font](ts-types.md#font) | No| Style of the text entered in the search box, including the font size, font width, font family, and font style. Currently, only the default font family is supported. Default value: **{size: $r('sys_float.ohos_id_text_size_body1')}**| 97| textAlign | [TextAlign](ts-appendix-enums.md#textalign) | No| Text alignment mode in the search text box. Default value: **TextAlign.Start** | 98| copyOptions | [CopyOptions](ts-appendix-enums.md#copyoptions9) | No| Whether copy and paste is allowed. Default value: **CopyOptions.LocalDevice** | 99| searchIcon | [IconOptions](ts-basic-components-search.md#iconoptions10) \| [SymbolGlyphModifier](ts-universal-attributes-attribute-modifier.md) | No| Style of the search icon on the left.<!--RP1--><br>Default value in light mode: **{size: '16vp', color: '#99182431', src:' '}**<br>Default value in dark mode: **{size: '16vp', color: '#99ffffff', src:' '}**<!--RP1End--> | 100| cancelIcon | [IconOptions](ts-basic-components-search.md#iconoptions10)| No| Style of the cancel button on the right. Default value: **{style: CancelButtonStyle.INPUT, icon: {size: '16vp', color: '#99ffffff', src:' '}}**<br>When style is set to **CancelButtonStyle.CONSTANT**, the cancel button is displayed in a default style. | 101| fontColor | [ResourceColor](ts-types.md#resourcecolor) | No| Font color of the input text. Default value: **$r('sys.color.ohos_id_color_text_secondary')**| 102| caretStyle | [CaretStyle](ts-text-common.md#caretstyle10) | No| Pointer style. Default value: **{width: '1.5vp', color: '#007DFF'}** | 103| enableKeyboardOnFocus | boolean | No| Whether to enable the input method when the **search** component obtains focus in a way other than clicking. Default value: **true** | 104| hideSelectionMenu | boolean | No| Whether to hide the system text selection menu.<br>**true**: The system text selection menu does not appear under the following circumstances: clicking the text box cursor, long-pressing the text box, double-tapping the text box, triple-tapping the text box, or right-clicking the text box. **false**: The system text selection menu appears under the following circumstances: clicking the text box cursor, long-pressing the text box, double-tapping the text box, triple-tapping the text box, or right-clicking the text box. Default value: **false** | 105| type | [SearchType](ts-basic-components-search.md#searchtype11)| No| Text box type. Default value: **SearchType.Normal** | 106| maxLength | number | No| Maximum number of characters in the text input. By default, there is no maximum number of characters. When the maximum number is reached, no more characters can be entered. Default value: **-1** | 107| enterKeyType | [EnterKeyType](ts-basic-components-textinput.md#enterkeytype)| No| Type of the Enter key. Default value: **EnterKeyType.Search** | 108| decoration | [TextDecorationOptions](ts-types.md#textdecorationoptions12)| No| Text decorative line options. Default value: **{type: TextDecorationType.None, color: Color.Black, style: TextDecorationStyle.SOLID}** | 109| letterSpacing | number \| string \| [Resource](ts-types.md#resource) | No| Letter spacing. If the value specified is a percentage or **0**, the default value is used. If the value specified is a negative value, the text is compressed. A negative value too small may result in the text being compressed to 0 and no content being displayed. Default value: **0** | 110| fontFeature | [ResourceStr](ts-types.md#resourcestr) | No| Font feature, for example, monospaced digits.<br>Format: normal \| \<feature-tag-value\><br>Syntax for \<feature-tag-value\>: \<string\> \[ \<integer\> \| on \| off ]<br>There can be multiple **\<feature-tag-value\>** values, which are separated by commas (,).<br>For example, the input format for monospaced digits is "ss01" on. The default value is **undefined**. | 111| selectedBackgroundColor | [ResourceColor](ts-types.md#resourcecolor) | No| Background color of the selected text. By default, a 20% opacity is applied.| 112| inputFilter | [InputFilterParams](#inputfilterparams) | No| Regular expression for input filtering. Only inputs that comply with the regular expression can be displayed. Other inputs are filtered out. The specified regular expression can match single characters, but not strings. The default value is **undefined**.<br> - **value**: regular expression.<br> - **error**: Filtered-out content to return when regular expression matching fails.| 113| textIndent | [Dimension](ts-types.md#dimension10) | No| Indent of the first line text. Default value: **0** | 114| minFontSize | number \| string \| [Resource](ts-types.md#resource) | No| Minimum font size. For the setting to take effect, this attribute must be used together with **maxFontSize** or layout constraint settings. The default value is **undefined**. | 115| maxFontSize | number \| string \| [Resource](ts-types.md#resource) | No| Maximum font size. For the setting to take effect, this attribute must be used together with **minFontSize** or layout constraint settings. The default value is **undefined**. | 116| editMenuOptions | [EditMenuOptions](ts-text-common.md#editmenuoptions) | No| Extended options of the custom context menu on selection, including the text content, icon, and callback. The default value is **undefined**. | 117| enablePreviewText | boolean | No| Whether to enable preview text. Default value: **true**<br> Preview text of the input method should be enabled. Preview text is in a temporary state and does not support text interception. As such, it does not trigger **onWillInsert** and **onDidInsert** callbacks. | 118| enableHapticFeedback | boolean | No| Whether to enable haptic feedback. Default value: **true** | 119| onSubmit | Callback<string> \| [SearchSubmitCallback](ts-basic-components-search.md#searchsubmitcallback14) | No| Callback triggered when users click the search icon or the search button, or touch the search button on a soft keyboard. The default value is **undefined**. | 120| onChange | [EditableTextOnChangeCallback](ts-text-common.md#editabletextonchangecallback12) | No| Callback triggered when the content in the text box changes. The default value is **undefined**. | 121| onCopy | Callback<string> | No| Callback triggered when a copy operation is performed. The default value is **undefined**. | 122| onCut | Callback<string> | No| Callback triggered when a cut operation is performed. The default value is **undefined**. | 123| onPaste | [OnPasteCallback](#onpastecallback) | No| Callback triggered when a paste operation is performed. The default value is **undefined**. | 124| onTextSelectionChange | [OnTextSelectionChangeCallback](#ontextselectionchangecallback) | No| Callback triggered when the position of the text selection changes or when the cursor position changes during the editing state. The default value is **undefined**. | 125| onContentScroll | [OnContentScrollCallback](#oncontentscrollcallback) | No| Callback triggered when the text content is scrolled. The default value is **undefined**. | 126| onEditChange | Callback<boolean> | No| Callback triggered when the input status changes. If a cursor is displayed, that is, the value of **isEditing** is **true**, the text box is in the editing state. The default value is **undefined**. | 127| onWillInsert | Callback<InsertValue, boolean> | No| Callback triggered when text is about to be inserted. The default value is **undefined**. | 128| onDidInsert | Callback<InsertValue> | No| Callback triggered when text is inserted. The default value is **undefined**. | 129| onWillDelete | Callback<DeleteValue, boolean> | No| Callback triggered when text is about to be deleted. The default value is **undefined**. | 130| onDidDelete | Callback<DeleteValue> | No| Callback triggered when text is deleted. The default value is **undefined**. | 131 132 133## OperationParams 134 135Sets initialization parameters of the function area. 136 137**Atomic service API**: This API can be used in atomic services since API version 18. 138 139**System capability**: SystemCapability.ArkUI.ArkUI.Full 140 141| Name | Type | Mandatory | Description | 142| ------------- | --------------- | ---------------------------- | ---- | 143| auxiliaryItem | [OperationOption ](ohos-arkui-advanced-SubHeader.md#operationoption)| No| Auxiliary item on the right of the search area. The default value is **undefined**.| 144| independentItem | [OperationOption ](ohos-arkui-advanced-SubHeader.md#operationoption)| No| Independent item on the right of the search area. The default value is **undefined**.| 145 146 147## InputFilterParams 148 149Sets regular expression for input filtering. 150 151**Atomic service API**: This API can be used in atomic services since API version 18. 152 153**System capability**: SystemCapability.ArkUI.ArkUI.Full 154 155| Name | Type | Mandatory| Description | 156| ---------------- | ---------------- | ---- | ---------------------------------- | 157| inputFilterValue | [ResourceStr](ts-types.md#resourcestr) | Yes| Regular expression.| 158| error | Callback<string> | No| Callback used to return the filtered-out content when regular expression matching fails. The default value is **undefined**.| 159 160## SearchButtonParams 161 162Sets the search button located next to the search text box. 163 164**Atomic service API**: This API can be used in atomic services since API version 18. 165 166**System capability**: SystemCapability.ArkUI.ArkUI.Full 167 168| Name | Type | Mandatory| Description | 169| ----------------- | ------------------- | ---- | ------------------------------------------------------------ | 170| searchButtonValue | [ResourceStr](ts-types.md#resourcestr) | Yes | Text on the search button located next to the search text box.| 171| options | [SearchButtonOptions](ts-basic-components-search.md#searchbuttonoptions10)| No | Font of the search text box. Default value: **{fontSize: '16fp',fontColor: '#ff3f97e9'}**| 172 173 174## MenuAlignParams 175 176Sets the alignment between the drop-down list button and the drop-down list box. 177 178**Atomic service API**: This API can be used in atomic services since API version 18. 179 180**System capability**: SystemCapability.ArkUI.ArkUI.Full 181 182| Name | Type | Mandatory| Description | 183| --------- | ------------- | ---- | ------------------------------------------------------------ | 184| alignType | [MenuAlignType](ts-basic-components-select.md#menualigntype10)| Yes| Alignment type. Default value: **MenuAlignType.START**| 185| offset | [Offset](ts-types.md#offset) | No| Offset of the drop-down list box relative to the drop-down list button after alignment based on the alignment type. Default value: **{dx: 0, dy: 0}**| 186 187 188## OnSelectCallback 189 190type OnSelectCallback = (index: number, selectValue: string) => void 191 192Called when an item in the drop-down list box is selected. 193 194**Atomic service API**: This API can be used in atomic services since API version 18. 195 196**System capability**: SystemCapability.ArkUI.ArkUI.Full 197 198**Parameters** 199 200| Name | Type | Mandatory| Description | 201| -------- | ------------------------------------------------------------ | ---- | -------------------------------------------------------- | 202| index | number | Yes| Index of the selected option.| 203| selectValue | string | Yes| Value of the selected option.| 204 205 206## OnPasteCallback 207 208type OnPasteCallback = (pasteValue: string, event: PasteEvent) => void 209 210Called when a paste operation is performed. 211 212**Atomic service API**: This API can be used in atomic services since API version 18. 213 214**System capability**: SystemCapability.ArkUI.ArkUI.Full 215 216**Parameters** 217 218| Name | Type | Mandatory| Description | 219| -------- | ------------------------------------------------------------ | ---- | -------------------------------------------------------- | 220| pasteValue | string | Yes| Text to be pasted.| 221| event | [PasteEvent](ts-basic-components-richeditor.md#pasteevent) | Yes| Custom paste event.| 222 223 224## OnTextSelectionChangeCallback 225 226type OnTextSelectionChangeCallback = (selectionStart: number, selectionEnd: number) => void 227 228Called when the position of the text selection changes or when the cursor position changes during the editing state. 229 230**Atomic service API**: This API can be used in atomic services since API version 18. 231 232**System capability**: SystemCapability.ArkUI.ArkUI.Full 233 234**Parameters** 235 236| Name | Type | Mandatory| Description | 237| -------- | ------------------------------------------------------------ | ---- | -------------------------------------------------------- | 238| selectionStart | number | Yes| Start position of the text to be selected.| 239| selectionEnd | number | Yes| End position of the text to be selected.| 240 241 242## OnContentScrollCallback 243 244type OnContentScrollCallback = (totalOffsetX: number, totalOffsetY: number) => void 245 246Called when the text content is scrolled. 247 248**Atomic service API**: This API can be used in atomic services since API version 18. 249 250**System capability**: SystemCapability.ArkUI.ArkUI.Full 251 252**Parameters** 253 254| Name | Type | Mandatory| Description | 255| -------- | ------------------------------------------------------------ | ---- | -------------------------------------------------------- | 256| totalOffsetX | number | Yes| X coordinate offset of the text in the content area.| 257| totalOffsetY | number | Yes| Y coordinate offset of the text in the content area.| 258 259 260## Examples 261 262### Example 1: Adding a Selection Area to AtomicServiceSearch 263This example demonstrates how to use the **select** parameter to add a selection area on the left to the **AtomicServiceSearch** component. 264 265```ts 266import { AtomicServiceSearch } from '@kit.ArkUI'; 267 268@Entry 269@Component 270struct Index { 271 build() { 272 Column({ space: 6 }) { 273 Text('AtomicServiceSearch + selection area').alignSelf(ItemAlign.Start).decoration({ 274 type: TextDecorationType.Underline, 275 color: Color.Black, 276 style: TextDecorationStyle.SOLID 277 }).margin({top:20, bottom: 20}) 278 279 AtomicServiceSearch({ 280 select: { 281 options: [ 282 { value: 'Select1', icon: $r("app.media.sweep") }, // Custom resource 283 { value: 'Select2', icon: $r("app.media.sweep") }, // Custom resource 284 { value: 'Select3', icon: $r("app.media.sweep") }, // Custom resource 285 { value: 'Select4', icon: $r("app.media.sweep") } // Custom resource 286 ], 287 selected: -1, 288 selectValue: 'Select1', 289 onSelect: (index: number, selectValue: string) => { // Custom event 290 if (index === 0) { 291 this.alert(`index: ${index}, selectValue: ${selectValue}`); 292 } else if (index === 1) { 293 this.alert(`index: ${index}, selectValue: ${selectValue}`); 294 } else if (index === 2) { 295 this.alert(`index: ${index}, selectValue: ${selectValue}`); 296 } else if (index === 3) { 297 this.alert(`index: ${index}, selectValue: ${selectValue}`); 298 } 299 }, 300 } 301 }) 302 }.padding({ left: 16, right: 16 }) 303 } 304 305 private alert(message: string): void { 306 AlertDialog.show({ 307 message: message 308 }) 309 } 310} 311``` 312 313 314 315 316 317### Example 2: Adding a Function Item to AtomicServiceSearch 318This example demonstrates how to use the **operation** parameter to add a function item on the right to the **AtomicServiceSearch** component. 319 320```ts 321import { AtomicServiceSearch } from '@kit.ArkUI'; 322 323@Entry 324@Component 325struct Index { 326 build() { 327 Column({ space: 6 }) { 328 Text('AtomicServiceSearch + function items').alignSelf(ItemAlign.Start).decoration({ 329 type: TextDecorationType.Underline, 330 color: Color.Black, 331 style: TextDecorationStyle.SOLID 332 }).margin({top:20, bottom: 20}) 333 334 AtomicServiceSearch({ 335 operation: { 336 // Auxiliary item of the Search component. 337 auxiliaryItem: { 338 value: $r("app.media.sweep"), // Custom resource 339 action: () => { 340 this.alert('Scan'); // Custom event 341 } 342 }, 343 // Independent item of the Search component. 344 independentItem: { 345 value: $r("app.media.dingding"), // Custom resource 346 action: () => { 347 this.alert('Notifications'); // Custom event 348 } 349 } 350 } 351 }) 352 }.padding({ left: 16, right: 16 }) 353 } 354 355 private alert(message: string): void { 356 AlertDialog.show({ 357 message: message 358 }) 359 } 360} 361``` 362 363 364 365 366 367### Example 3: Adding a Selection Area and Function Item to AtomicServiceSearch 368This example demonstrates how to add the selection area and function items on the left and right to the AtomicServiceSearch component. 369 370```ts 371import { AtomicServiceSearch } from '@kit.ArkUI'; 372 373@Entry 374@Component 375struct Index { 376 build() { 377 Column({ space: 6 }) { 378 Text('AtomicServiceSearch + selection area + function items').alignSelf(ItemAlign.Start).decoration({ 379 type: TextDecorationType.Underline, 380 color: Color.Black, 381 style: TextDecorationStyle.SOLID 382 }).margin({top:20, bottom: 20}) 383 384 AtomicServiceSearch({ 385 select: { 386 options: [ 387 { value: 'Select1', icon: $r("app.media.sweep") }, // Custom resource 388 { value: 'Select2', icon: $r("app.media.sweep") }, // Custom resource 389 { value: 'Select3', icon: $r("app.media.sweep") }, // Custom resource 390 { value: 'Select4', icon: $r("app.media.sweep") } // Custom resource 391 ], 392 selected: -1, 393 selectValue: 'Select1', 394 onSelect: (index: number, selectValue:string) => { 395 if (index === 0) { 396 this.alert(`index: ${index}, selectValue: ${selectValue}`); 397 } else if (index === 1) { 398 this.alert(`index: ${index}, selectValue: ${selectValue}`); 399 } else if (index === 2) { 400 this.alert(`index: ${index}, selectValue: ${selectValue}`); 401 } else if (index === 3) { 402 this.alert(`index: ${index}, selectValue: ${selectValue}`); 403 } 404 }, 405 }, 406 operation: { 407 auxiliaryItem: { 408 value: $r("app.media.sweep"), // Custom resource 409 action: () => { 410 this.alert('Scan'); // Custom event 411 } 412 }, 413 independentItem: { 414 value: $r("app.media.dingding"), // Custom resource 415 action: () => { 416 this.alert('Notifications'); // Custom event 417 } 418 } 419 } 420 }) 421 }.padding({ left: 16, right: 16 }) 422 } 423 424 private alert(message: string): void { 425 AlertDialog.show({ 426 message: message 427 }) 428 } 429} 430``` 431 432 433 434 435 436### Example 4: Binding the Search Callback Events to AtomicServiceSearch 437This example demonstrates how to use the **onWillInsert**, **onDidInsert**, **onWillDelete**, and **onDidDelete** APIs to implement insert and delete operations. 438The **onSubmit** API is used to submit content in the search area. 439The **onChange** API is used to listen for the content changes in the search area. 440 441```ts 442import { AtomicServiceSearch } from '@kit.ArkUI'; 443 444@Entry 445@Component 446struct Index { 447 @State insertValue: string = ""; 448 @State deleteValue: string = ""; 449 @State insertOffset: number = 0; 450 @State deleteOffset: number = 0; 451 @State deleteDirection: number = 0; 452 @State startIndex: number = 0; 453 @State endIndex: number = 0; 454 @State offsetX: number = 0; 455 @State offsetY: number = 0; 456 @State changeValue: string = ''; 457 @State value: string = 'false'; 458 @State submitValue: string = ''; 459 @State text: string = 'Search editMenuOptions'; 460 461 build() { 462 Column({ space: 6 }) { 463 Text('Binding events to AtomicServiceSearch').alignSelf(ItemAlign.Start).decoration({ 464 type: TextDecorationType.Underline, 465 color: Color.Black, 466 style: TextDecorationStyle.SOLID 467 }).margin({top:20, bottom: 20}) 468 469 Column({ space: 6 }) { 470 Text('editing: ' + this.value).width('100%').height(25).borderRadius(15).padding({ left: 15 }) 471 .backgroundColor('rgba(0, 0, 0, 0.1)').maxLines(1).textOverflow({ overflow: TextOverflow.MARQUEE }); 472 Text('onSubmit:' + this.submitValue).width('100%').height(25).borderRadius(15).padding({ left: 15 }) 473 .backgroundColor('rgba(0, 0, 0, 0.1)').maxLines(1).textOverflow({ overflow: TextOverflow.MARQUEE }); 474 Text('onChange:' + this.changeValue).width('100%').height(25).borderRadius(15).padding({ left: 15 }) 475 .backgroundColor('rgba(0, 0, 0, 0.1)').maxLines(1).textOverflow({ overflow: TextOverflow.MARQUEE }); 476 Text('offset x:' + this.offsetX + ' y:' + this.offsetY).width('100%').height(25).borderRadius(15).padding({ left: 15 }) 477 .backgroundColor('rgba(0, 0, 0, 0.1)').maxLines(1).textOverflow({ overflow: TextOverflow.MARQUEE }); 478 Text("insertValue:" + this.insertValue + " insertOffset:" + this.insertOffset).width('100%').height(25) 479 .borderRadius(15).padding({ left: 15 }).backgroundColor('rgba(0, 0, 0, 0.1)').maxLines(1) 480 .textOverflow({ overflow: TextOverflow.MARQUEE }); 481 Text("deleteValue:" + this.deleteValue + " deleteOffset:" + this.deleteOffset).width('100%').height(25) 482 .borderRadius(15).padding({ left: 15 }).backgroundColor('rgba(0, 0, 0, 0.1)').maxLines(1) 483 .textOverflow({ overflow: TextOverflow.MARQUEE }); 484 Text("deleteDirection:" + (this.deleteDirection == 0 ? "BACKWARD" : "FORWARD")).width('100%').height(25) 485 .borderRadius(15).padding({ left: 15 }).backgroundColor('rgba(0, 0, 0, 0.1)').maxLines(1) 486 .textOverflow({ overflow: TextOverflow.MARQUEE }); 487 AtomicServiceSearch({ 488 select: { 489 options: [ 490 { value: 'Select1', icon: $r("app.media.sweep") }, 491 { value: 'Select2', icon: $r("app.media.sweep") }, 492 { value: 'Select3', icon: $r("app.media.sweep") }, 493 { value: 'Select4', icon: $r("app.media.sweep") } 494 ], 495 selected: -1, 496 selectValue: 'Select1', 497 onSelect: (index: number) => { 498 if (index === 0) { 499 this.alert('Select1'); 500 } else if (index === 1) { 501 this.alert('Select2'); 502 } else if (index === 2) { 503 this.alert('Select3'); 504 } else if (index === 3) { 505 this.alert('Select4'); 506 } 507 }, 508 }, 509 search: { 510 onSubmit: (value: string) => { 511 this.submitValue = value 512 }, 513 onChange: (value: string) => { 514 this.changeValue = value 515 }, 516 onCopy: () => { 517 this.alert('onCopy'); 518 }, 519 onCut: () => { 520 this.alert('onCut'); 521 }, 522 onPaste: () => { 523 this.alert('onPaste'); 524 }, 525 onTextSelectionChange: (selectionStart: number, selectionEnd: number) => { 526 this.startIndex = selectionStart 527 this.endIndex = selectionEnd 528 }, 529 onContentScroll: (totalOffsetX: number, totalOffsetY: number) => { 530 this.offsetX = totalOffsetX 531 this.offsetY = totalOffsetY 532 }, 533 onEditChange: (data: boolean) => { 534 this.value = data ? 'true' : 'false' 535 }, 536 onWillInsert: (info: InsertValue) => { 537 this.insertValue = info.insertValue 538 return true; 539 }, 540 onDidInsert: (info: InsertValue) => { 541 this.insertOffset = info.insertOffset 542 }, 543 onWillDelete: (info: DeleteValue) => { 544 this.deleteValue = info.deleteValue 545 info.direction 546 return true; 547 }, 548 onDidDelete: (info: DeleteValue) => { 549 this.deleteOffset = info.deleteOffset 550 this.deleteDirection = info.direction 551 } 552 } 553 }) 554 } 555 }.padding({ left: 16, right: 16 }) 556 } 557 558 private alert(message: string): void { 559 AlertDialog.show({ 560 message: message 561 }) 562 } 563} 564``` 565 566 567 568 569### Example 5: Customizing the Style of AtomicServiceSearch 570This example demonstrates how to use the **search**, **select**, **value**, and **placeholder** parameters to customize the style of the **AtomicServiceSearch** component. 571 572```ts 573import { AtomicServiceSearch } from '@kit.ArkUI'; 574 575@Entry 576@Component 577struct Index { 578 @State private placeholder: string = 'Type to Search...'; 579 @State private defaultValue: string = 'default'; 580 @State private search?: SearchParams = {}; 581 @State private select?: SelectParams = { 582 options: [ 583 { value: 'Select1', icon: $r("app.media.sweep") }, 584 { value: 'Select2', icon: $r("app.media.sweep") }, 585 { value: 'Select3', icon: $r("app.media.sweep") }, 586 { value: 'Select4', icon: $r("app.media.sweep") } 587 ], 588 selected: -1, 589 selectValue: 'Select1', 590 onSelect: (index: number) => { 591 if (index === 0) { 592 this.alert('Select1'); 593 } else if (index === 1) { 594 this.alert('Select2'); 595 } else if (index === 2) { 596 this.alert('Select3'); 597 } else if (index === 3) { 598 this.alert('Select4'); 599 } 600 } 601 }; 602 603 build() { 604 Column({ space: 8 }) { 605 Text('Customizing styles').alignSelf(ItemAlign.Start).decoration({ 606 type: TextDecorationType.Underline, 607 color: Color.Black, 608 style: TextDecorationStyle.SOLID 609 }).margin({ top: 20, bottom: 20 }) 610 611 AtomicServiceSearch({ 612 value: this.defaultValue, 613 placeholder: this.placeholder, 614 select: this.select, 615 search: this.search, 616 operation: { 617 independentItem: { 618 value: $r(`app.media.dingding`), 619 action: () => { 620 this.alert('Notification'); 621 } 622 } 623 } 624 }) 625 Button("Change placeholder") 626 .width('100%') 627 .type(ButtonType.Normal) 628 .borderRadius(20) 629 .onClick(() => { 630 if (this.placeholder === 'Search...') { 631 this.placeholder = 'Type to Search...'; 632 } else { 633 this.placeholder = 'Search...'; 634 } 635 }); 636 Button("Change defaultValue") 637 .width('100%') 638 .type(ButtonType.Normal) 639 .borderRadius(20) 640 .onClick(() => { 641 if (this.defaultValue === 'value') { 642 this.defaultValue = 'defaultValue'; 643 } else { 644 this.defaultValue = 'value'; 645 } 646 }); 647 Button("Change selection area style") 648 .width('100%') 649 .type(ButtonType.Normal) 650 .borderRadius(20) 651 .onClick(() => { 652 this.select = { 653 options: [ 654 { value: 'Option 1', icon: $r("app.media.dingding") }, 655 { value: 'Option 2', icon: $r("app.media.dingding") }, 656 ], 657 selected: -1, 658 selectValue: 'Option 1', 659 onSelect: (index: number) => { 660 if (index === 0) { 661 this.alert('Option 1'); 662 } else if (index === 1) { 663 this.alert('Option 2'); 664 } 665 } 666 }; 667 }); 668 669 Button("Change search area style") 670 .width('100%') 671 .type(ButtonType.Normal) 672 .borderRadius(20) 673 .onClick(() => { 674 this.search = { 675 componentBackgroundColor: '#e0eee8' 676 } 677 }); 678 }.padding({ left: 16, right: 16 }) 679 } 680 681 private alert(message: string): void { 682 AlertDialog.show({ 683 message: message 684 }) 685 } 686} 687``` 688 689 690 691 692 693 694### Example 6: Setting the Caret Position Using controller 695This example demonstrates how to use the **controller** parameter to set the caret position, select the content in the specified area, and disable the editing state. 696 697 698```ts 699import { AtomicServiceSearch } from '@kit.ArkUI'; 700 701@Entry 702@Component 703struct Index { 704 controller: SearchController = new SearchController(); 705 706 build() { 707 Column({ space : 10 }) { 708 Text('Setting the caret position using controller').alignSelf(ItemAlign.Start).decoration({ 709 type: TextDecorationType.Underline, 710 color: Color.Black, 711 style: TextDecorationStyle.SOLID 712 }).margin({top:20, bottom: 20}) 713 714 AtomicServiceSearch( 715 { 716 value: 'Default Value', 717 placeholder: 'Type to Search...', 718 controller: this.controller, 719 search: { 720 searchButton: { 721 searchButtonValue: 'SEARCH', 722 options: { fontSize: '12fp', fontColor: '#ff0e1216' } 723 } 724 } 725 }, 726 ); 727 Button('caretPosition to 1').onClick(() => { 728 this.controller.caretPosition(1); 729 }).width('100%') 730 Button('stopEditing').onClick(() => { 731 this.controller.stopEditing(); 732 }).width('100%') 733 Button('Selection [0,3]').onClick(() => { 734 this.controller.setTextSelection(0, 3) 735 }).width('100%') 736 }.padding({ left: 16, right: 16 }) 737 } 738 739 public alert(message: string): void { 740 AlertDialog.show({ 741 message: message, 742 }) 743 } 744} 745``` 746 747 748 749 750 751 752### Example 7: Setting the Enter Key Type 753This example demonstrates how to use the **enterKeyType** attribute to dynamically change the effect of the Enter key on the soft keyboard. 754 755```ts 756import { AtomicServiceSearch } from '@kit.ArkUI'; 757 758@Entry 759@Component 760struct Index { 761 @State enterTypes: Array<EnterKeyType> = [EnterKeyType.Go, EnterKeyType.Search, EnterKeyType.Send, EnterKeyType.Done, EnterKeyType.Next, EnterKeyType.PREVIOUS, EnterKeyType.NEW_LINE] 762 @State index: number = 0 763 764 build() { 765 Column({ space : 10 }) { 766 Text('Enter key type as search').alignSelf(ItemAlign.Start).decoration({ 767 type: TextDecorationType.Underline, 768 color: Color.Black, 769 style: TextDecorationStyle.SOLID 770 }).margin({top:20, bottom: 20}) 771 772 AtomicServiceSearch({ 773 placeholder: 'Enter key type as search', 774 search: { 775 enterKeyType: this.enterTypes[this.index] 776 } 777 }) 778 779 Button('Change EnterKeyType').onClick(() => { 780 this.index = (this.index + 1) % this.enterTypes.length; 781 }).width('100%') 782 783 }.padding({ left: 16, right: 16 }) 784 } 785 786 public alert(message: string): void { 787 AlertDialog.show({ 788 message: message, 789 }) 790 } 791} 792``` 793 794 795 796 797 798### Example 8: Setting Text Feature Effects 799This example demonstrates how to use the **fontFeature** attribute to display text with various typographic features. 800 801```ts 802import { AtomicServiceSearch } from '@kit.ArkUI'; 803 804@Entry 805@Component 806struct Index { 807 build() { 808 Column({ space : 10 }) { 809 Text('Setting text feature effects').alignSelf(ItemAlign.Start).decoration({ 810 type: TextDecorationType.Underline, 811 color: Color.Black, 812 style: TextDecorationStyle.SOLID 813 }).margin({top:20, bottom: 20}) 814 815 AtomicServiceSearch({ 816 value: 'This is ss01 on : 0123456789', 817 search: { 818 fontFeature: "\"ss012\" on" 819 } 820 }); 821 822 AtomicServiceSearch({ 823 value: 'This is ss01 off : 0123456789', 824 search: { 825 fontFeature: "\"ss01\" off" 826 } 827 }); 828 }.padding({ left: 16, right: 16 }) 829 } 830 831 public alert(message: string): void { 832 AlertDialog.show({ 833 message: message, 834 }) 835 } 836} 837``` 838 839 840 841 842 843### Example 9: Setting Text Auto-Adaptation 844This example demonstrates how to use the **minFontSize** and **maxFontSize** attributes to implement the text auto-adaptation features. 845 846```ts 847import { AtomicServiceSearch } from '@kit.ArkUI'; 848 849@Entry 850@Component 851struct Index { 852 build() { 853 Column({ space : 10 }) { 854 Text('Setting text auto-adaptation').alignSelf(ItemAlign.Start).decoration({ 855 type: TextDecorationType.Underline, 856 color: Color.Black, 857 style: TextDecorationStyle.SOLID 858 }).margin({top:20, bottom: 20}) 859 860 AtomicServiceSearch({ 861 value: 'This is the text without the adaptive font', 862 }).width('80%').height(40).borderWidth(1).borderRadius(20) 863 864 AtomicServiceSearch({ 865 value: 'This is the text without the adaptive font', 866 search: { 867 minFontSize: 4, 868 maxFontSize: 40 869 } 870 }).width('80%').height(40).borderWidth(1).borderRadius(20) 871 }.padding({ left: 16, right: 16 }) 872 } 873 874 public alert(message: string): void { 875 AlertDialog.show({ 876 message: message, 877 }) 878 } 879} 880``` 881 882 883 884 885 886### Example 10: Setting Custom Menu Extensions 887This example demonstrates how to use the **editMenuOptions** API to create custom menu extensions for text settings. It includes customizing text content, icons, and callbacks for these extensions. 888 889```ts 890import { AtomicServiceSearch } from '@kit.ArkUI'; 891 892@Entry 893@Component 894struct Index { 895 onCreateMenu = (menuItems: Array<TextMenuItem>) => { 896 let item1: TextMenuItem = { 897 content: 'custom1', 898 icon: $r('app.media.startIcon'), 899 id: TextMenuItemId.of('custom1'), 900 } 901 let item2: TextMenuItem = { 902 content: 'custom2', 903 id: TextMenuItemId.of('custom2'), 904 icon: $r('app.media.startIcon'), 905 } 906 menuItems.push(item1) 907 menuItems.unshift(item2) 908 return menuItems 909 } 910 911 onMenuItemClick = (menuItem: TextMenuItem, textRange: TextRange) => { 912 if (menuItem.id.equals(TextMenuItemId.of("custom2"))) { 913 console.log("Intercept id: custom2 start:" + textRange.start + "; end:" + textRange.end) 914 return true 915 } 916 if (menuItem.id.equals(TextMenuItemId.COPY)) { 917 console.log("Intercept COPY start:" + textRange.start + "; end:" + textRange.end) 918 return true 919 } 920 if (menuItem.id.equals(TextMenuItemId.SELECT_ALL)) { 921 console.log("Do not intercept SELECT_ALL start:" + textRange.start + "; end:" + textRange.end) 922 return false 923 } 924 return false 925 } 926 927 @State editMenuOptions: EditMenuOptions = { 928 onCreateMenu: this.onCreateMenu, onMenuItemClick: this.onMenuItemClick 929 } 930 931 build() { 932 Column({ space : 10 }) { 933 Text('Setting custom menu extensions').alignSelf(ItemAlign.Start).decoration({ 934 type: TextDecorationType.Underline, 935 color: Color.Black, 936 style: TextDecorationStyle.SOLID 937 }).margin({top:20, bottom: 20}) 938 939 AtomicServiceSearch({ 940 value:'Default input', 941 search: { 942 editMenuOptions : this.editMenuOptions 943 } 944 }) 945 }.padding({ left: 16, right: 16 }) 946 } 947 948 public alert(message: string): void { 949 AlertDialog.show({ 950 message: message, 951 }) 952 } 953} 954``` 955 956 957 958 959 960 961 962### Example 11: Setting the Horizontal Alignment, Caret Style, and Background Color of the Selected Text 963This example shows how to set the horizontal alignment, caret style, and background color of the selected text using **textAlign**, **caretStyle**, and **selectedBackgroundColor**. 964 965```ts 966import { AtomicServiceSearch } from '@kit.ArkUI'; 967 968@Entry 969@Component 970struct Index { 971 build() { 972 Column() { 973 Text('Setting horizontal alignment/caret style/background color of selected text').alignSelf(ItemAlign.Start).decoration({ 974 type: TextDecorationType.Underline, 975 color: Color.Black, 976 style: TextDecorationStyle.SOLID 977 }).margin({top:20, bottom: 20}) 978 979 AtomicServiceSearch({ 980 value: 'Search textAlign sample', 981 search: { 982 textAlign: TextAlign.Center, 983 caretStyle: { width: 3, color: Color.Green }, 984 selectedBackgroundColor: Color.Gray 985 } 986 }) 987 }.padding({ left: 16, right: 16 }) 988 } 989 990 public alert(message: string): void { 991 AlertDialog.show({ 992 message: message, 993 }) 994 } 995} 996``` 997 998 999 1000 1001 1002### Example 12: Setting Input Filtering 1003This example shows how to set input filtering using **inputFilter**. 1004 1005```ts 1006import { AtomicServiceSearch } from '@kit.ArkUI'; 1007 1008@Entry 1009@Component 1010struct Index { 1011 @State filterValue: string = ''; 1012 1013 build() { 1014 Column() { 1015 Column({ space: 10 }) { 1016 Text('Setting input filtering').alignSelf(ItemAlign.Start).decoration({ 1017 type: TextDecorationType.Underline, 1018 color: Color.Black, 1019 style: TextDecorationStyle.SOLID 1020 }).margin({top:20, bottom: 20}) 1021 AtomicServiceSearch({ 1022 placeholder: 'please enter...', 1023 search: { 1024 inputFilter: { 1025 inputFilterValue : '[a-z]', 1026 error: (filterValue: string) => {this.filterValue = filterValue} 1027 } 1028 } 1029 }) 1030 Text('Filter:' + this.filterValue).alignSelf(ItemAlign.Start) 1031 1032 } 1033 }.padding({ left: 16, right: 16 }) 1034 } 1035 1036 public alert(message: string): void { 1037 AlertDialog.show({ 1038 message: message, 1039 }) 1040 } 1041} 1042``` 1043 1044 1045
