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 | - | **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. Once it is applied, the drop-down list box content will be fully customizable by developers. Note that default style attributes (such as dividers, background color, and font styles) will no longer take effect.<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.<br>Default value in light mode: **{size: '16vp', color: '#99182431', src:' '}**<br>Default value in dark mode: **{size: '16vp', color: '#99ffffff', src:' '}** | 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. A positive value causes characters to spread farther apart, and a negative value bring characters closer together. The value for floating point numbers is **0.0**, in units of px. If the input is not a number and cannot be parsed as a number, the default value will be used. | 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](ts-text-common.md#insertvalue12), boolean> | No| Callback triggered when text is about to be inserted. The default value is **undefined**. | 128| onDidInsert | Callback<[InsertValue](ts-text-common.md#insertvalue12)> | No| Callback triggered when text is inserted. The default value is **undefined**. | 129| onWillDelete | Callback<[DeleteValue](ts-text-common.md#deletevalue12), boolean> | No| Callback triggered when text is about to be deleted. The default value is **undefined**. | 130| onDidDelete | Callback<[DeleteValue](ts-text-common.md#deletevalue12)> | No| Callback triggered when text is deleted. The default value is **undefined**. | 131 132## OperationParams 133 134Sets initialization parameters of the function area. 135 136**Atomic service API**: This API can be used in atomic services since API version 18. 137 138**System capability**: SystemCapability.ArkUI.ArkUI.Full 139 140| Name | Type | Mandatory | Description | 141| ------------- | --------------- | ---------------------------- | ---- | 142| auxiliaryItem | [OperationOption ](ohos-arkui-advanced-SubHeader.md#operationoption)| No| Auxiliary item on the right of the search area. The default value is **undefined**.| 143| independentItem | [OperationOption ](ohos-arkui-advanced-SubHeader.md#operationoption)| No| Independent item on the right of the search area. The default value is **undefined**.| 144 145 146## InputFilterParams 147 148Sets regular expression for input filtering. 149 150**Atomic service API**: This API can be used in atomic services since API version 18. 151 152**System capability**: SystemCapability.ArkUI.ArkUI.Full 153 154| Name | Type | Mandatory| Description | 155| ---------------- | ---------------- | ---- | ---------------------------------- | 156| inputFilterValue | [ResourceStr](ts-types.md#resourcestr) | Yes| Regular expression.| 157| error | Callback<string> | No| Callback used to return the filtered-out content when regular expression matching fails. The default value is **undefined**.| 158 159## SearchButtonParams 160 161Sets the search button located next to the search text box. 162 163**Atomic service API**: This API can be used in atomic services since API version 18. 164 165**System capability**: SystemCapability.ArkUI.ArkUI.Full 166 167| Name | Type | Mandatory| Description | 168| ----------------- | ------------------- | ---- | ------------------------------------------------------------ | 169| searchButtonValue | [ResourceStr](ts-types.md#resourcestr) | Yes | Text on the search button located next to the search text box.| 170| options | [SearchButtonOptions](ts-basic-components-search.md#searchbuttonoptions10)| No | Font of the search text box. Default value: **{fontSize: '16fp',fontColor: '#ff3f97e9'}**| 171 172 173## MenuAlignParams 174 175Sets the alignment between the drop-down list button and the drop-down list box. 176 177**Atomic service API**: This API can be used in atomic services since API version 18. 178 179**System capability**: SystemCapability.ArkUI.ArkUI.Full 180 181| Name | Type | Mandatory| Description | 182| --------- | ------------- | ---- | ------------------------------------------------------------ | 183| alignType | [MenuAlignType](ts-basic-components-select.md#menualigntype10)| Yes| Alignment type. Default value: **MenuAlignType.START**| 184| 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}**| 185 186 187## OnSelectCallback 188 189type OnSelectCallback = (index: number, selectValue: string) => void 190 191Called when an item in the drop-down list box is selected. 192 193**Atomic service API**: This API can be used in atomic services since API version 18. 194 195**System capability**: SystemCapability.ArkUI.ArkUI.Full 196 197**Parameters** 198 199| Name | Type | Mandatory| Description | 200| -------- | ------------------------------------------------------------ | ---- | -------------------------------------------------------- | 201| index | number | Yes| Index of the selected option. The index is zero-based.| 202| selectValue | string | Yes| Value of the selected option.| 203 204 205## OnPasteCallback 206 207type OnPasteCallback = (pasteValue: string, event: PasteEvent) => void 208 209Called when a paste operation is performed. 210 211**Atomic service API**: This API can be used in atomic services since API version 18. 212 213**System capability**: SystemCapability.ArkUI.ArkUI.Full 214 215**Parameters** 216 217| Name | Type | Mandatory| Description | 218| -------- | ------------------------------------------------------------ | ---- | -------------------------------------------------------- | 219| pasteValue | string | Yes| Text to be pasted.| 220| event | [PasteEvent](ts-basic-components-richeditor.md#pasteevent11) | Yes| Custom paste event.| 221 222 223## OnTextSelectionChangeCallback 224 225type OnTextSelectionChangeCallback = (selectionStart: number, selectionEnd: number) => void 226 227Called when the position of the text selection changes or when the cursor position changes during the editing state. 228 229**Atomic service API**: This API can be used in atomic services since API version 18. 230 231**System capability**: SystemCapability.ArkUI.ArkUI.Full 232 233**Parameters** 234 235| Name | Type | Mandatory| Description | 236| -------- | ------------------------------------------------------------ | ---- | -------------------------------------------------------- | 237| selectionStart | number | Yes| Start position of the text to be selected.| 238| selectionEnd | number | Yes| End position of the text to be selected.| 239 240 241## OnContentScrollCallback 242 243type OnContentScrollCallback = (totalOffsetX: number, totalOffsetY: number) => void 244 245Called when the text content is scrolled. 246 247**Atomic service API**: This API can be used in atomic services since API version 18. 248 249**System capability**: SystemCapability.ArkUI.ArkUI.Full 250 251**Parameters** 252 253| Name | Type | Mandatory| Description | 254| -------- | ------------------------------------------------------------ | ---- | -------------------------------------------------------- | 255| totalOffsetX | number | Yes| Offset of the horizontal coordinate of the upper left corner of the text relative to the horizontal coordinate of the upper left corner of the entire content input area.| 256| totalOffsetY | number | Yes| Offset of the vertical coordinate of the upper left corner of the text relative to the vertical coordinate of the upper left corner of the entire content input area.| 257 258 259## Example 260 261### Example 1: Adding a Selection Area to AtomicServiceSearch 262This example demonstrates how to use the **select** parameter to add a selection area on the left to the **AtomicServiceSearch** component. 263 264```ts 265import { AtomicServiceSearch } from '@kit.ArkUI'; 266 267@Entry 268@Component 269struct Index { 270 build() { 271 Column({ space: 6 }) { 272 Text('AtomicServiceSearch + selection area').alignSelf(ItemAlign.Start).decoration({ 273 type: TextDecorationType.Underline, 274 color: Color.Black, 275 style: TextDecorationStyle.SOLID 276 }).margin({ top: 20, bottom: 20 }) 277 278 AtomicServiceSearch({ 279 select: { 280 options: [ 281 { value: 'Select1', icon: $r("app.media.sweep") }, // Custom resource 282 { value: 'Select2', icon: $r("app.media.sweep") }, // Custom resource 283 { value: 'Select3', icon: $r("app.media.sweep") }, // Custom resource 284 { value: 'Select4', icon: $r("app.media.sweep") } // Custom resource 285 ], 286 selected: -1, 287 selectValue: 'Select1', 288 onSelect: (index: number, selectValue: string) => { // Custom event 289 if (index === 0) { 290 this.alert(`index: ${index}, selectValue: ${selectValue}`); 291 } else if (index === 1) { 292 this.alert(`index: ${index}, selectValue: ${selectValue}`); 293 } else if (index === 2) { 294 this.alert(`index: ${index}, selectValue: ${selectValue}`); 295 } else if (index === 3) { 296 this.alert(`index: ${index}, selectValue: ${selectValue}`); 297 } 298 }, 299 } 300 }) 301 }.padding({ left: 16, right: 16 }) 302 } 303 304 private alert(message: string): void { 305 this.getUIContext().showAlertDialog({ message: message }); 306 } 307} 308``` 309 310 311 312 313 314### Example 2: Adding a Function Item to AtomicServiceSearch 315This example demonstrates how to use the **operation** parameter to add a function item on the right to the **AtomicServiceSearch** component. 316 317```ts 318import { AtomicServiceSearch } from '@kit.ArkUI'; 319 320@Entry 321@Component 322struct Index { 323 build() { 324 Column({ space: 6 }) { 325 Text('AtomicServiceSearch + function items').alignSelf(ItemAlign.Start).decoration({ 326 type: TextDecorationType.Underline, 327 color: Color.Black, 328 style: TextDecorationStyle.SOLID 329 }).margin({ top: 20, bottom: 20 }) 330 331 AtomicServiceSearch({ 332 operation: { 333 // Auxiliary item of the Search component. 334 auxiliaryItem: { 335 value: $r("app.media.sweep"), // Custom resource 336 action: () => { 337 this.alert('Scan'); // Custom event 338 } 339 }, 340 // Independent item of the Search component. 341 independentItem: { 342 value: $r("app.media.dingding"), // Custom resource 343 action: () => { 344 this.alert('Notifications'); // Custom event 345 } 346 } 347 } 348 }) 349 }.padding({ left: 16, right: 16 }) 350 } 351 352 private alert(message: string): void { 353 this.getUIContext().showAlertDialog({ message: message }); 354 } 355} 356``` 357 358 359 360 361 362### Example 3: Adding a Selection Area and Function Item to AtomicServiceSearch 363This example demonstrates how to add the selection area and function items on the left and right to the AtomicServiceSearch component. 364 365```ts 366import { AtomicServiceSearch } from '@kit.ArkUI'; 367 368@Entry 369@Component 370struct Index { 371 build() { 372 Column({ space: 6 }) { 373 Text('AtomicServiceSearch + selection area + function items').alignSelf(ItemAlign.Start).decoration({ 374 type: TextDecorationType.Underline, 375 color: Color.Black, 376 style: TextDecorationStyle.SOLID 377 }).margin({ top: 20, bottom: 20 }) 378 379 AtomicServiceSearch({ 380 select: { 381 options: [ 382 { value: 'Select1', icon: $r("app.media.sweep") }, // Custom resource 383 { value: 'Select2', icon: $r("app.media.sweep") }, // Custom resource 384 { value: 'Select3', icon: $r("app.media.sweep") }, // Custom resource 385 { value: 'Select4', icon: $r("app.media.sweep") } // Custom resource 386 ], 387 selected: -1, 388 selectValue: 'Select1', 389 onSelect: (index: number, selectValue:string) => { 390 if (index === 0) { 391 this.alert(`index: ${index}, selectValue: ${selectValue}`); 392 } else if (index === 1) { 393 this.alert(`index: ${index}, selectValue: ${selectValue}`); 394 } else if (index === 2) { 395 this.alert(`index: ${index}, selectValue: ${selectValue}`); 396 } else if (index === 3) { 397 this.alert(`index: ${index}, selectValue: ${selectValue}`); 398 } 399 }, 400 }, 401 operation: { 402 auxiliaryItem: { 403 value: $r("app.media.sweep"), // Custom resource 404 action: () => { 405 this.alert('Scan'); // Custom event 406 } 407 }, 408 independentItem: { 409 value: $r("app.media.dingding"), // Custom resource 410 action: () => { 411 this.alert('Notifications'); // Custom event 412 } 413 } 414 } 415 }) 416 }.padding({ left: 16, right: 16 }) 417 } 418 419 private alert(message: string): void { 420 this.getUIContext().showAlertDialog({ message: message }); 421 } 422} 423``` 424 425 426 427 428 429### Example 4: Binding the Search Callback Events to AtomicServiceSearch 430This example demonstrates how to use the **onWillInsert**, **onDidInsert**, **onWillDelete**, and **onDidDelete** APIs to implement insert and delete operations. 431The **onSubmit** API is used to submit content in the search area. 432The **onChange** API is used to listen for the content changes in the search area. 433 434```ts 435import { AtomicServiceSearch } from '@kit.ArkUI'; 436 437@Entry 438@Component 439struct Index { 440 @State insertValue: string = ""; 441 @State deleteValue: string = ""; 442 @State insertOffset: number = 0; 443 @State deleteOffset: number = 0; 444 @State deleteDirection: number = 0; 445 @State startIndex: number = 0; 446 @State endIndex: number = 0; 447 @State offsetX: number = 0; 448 @State offsetY: number = 0; 449 @State changeValue: string = ''; 450 @State value: string = 'false'; 451 @State submitValue: string = ''; 452 @State text: string = 'Search editMenuOptions'; 453 454 build() { 455 Column({ space: 6 }) { 456 Text('Binding events to AtomicServiceSearch').alignSelf(ItemAlign.Start).decoration({ 457 type: TextDecorationType.Underline, 458 color: Color.Black, 459 style: TextDecorationStyle.SOLID 460 }).margin({ top: 20, bottom: 20 }) 461 462 Column({ space: 6 }) { 463 Text('editing: ' + this.value).width('100%').height(25).borderRadius(15).padding({ left: 15 }) 464 .backgroundColor('rgba(0, 0, 0, 0.1)').maxLines(1).textOverflow({ overflow: TextOverflow.MARQUEE }); 465 Text('onSubmit:' + this.submitValue).width('100%').height(25).borderRadius(15).padding({ left: 15 }) 466 .backgroundColor('rgba(0, 0, 0, 0.1)').maxLines(1).textOverflow({ overflow: TextOverflow.MARQUEE }); 467 Text('onChange:' + this.changeValue).width('100%').height(25).borderRadius(15).padding({ left: 15 }) 468 .backgroundColor('rgba(0, 0, 0, 0.1)').maxLines(1).textOverflow({ overflow: TextOverflow.MARQUEE }); 469 Text('offset x:' + this.offsetX + ' y:' + this.offsetY).width('100%').height(25).borderRadius(15).padding({ left: 15 }) 470 .backgroundColor('rgba(0, 0, 0, 0.1)').maxLines(1).textOverflow({ overflow: TextOverflow.MARQUEE }); 471 Text("insertValue:" + this.insertValue + " insertOffset:" + this.insertOffset).width('100%').height(25) 472 .borderRadius(15).padding({ left: 15 }).backgroundColor('rgba(0, 0, 0, 0.1)').maxLines(1) 473 .textOverflow({ overflow: TextOverflow.MARQUEE }); 474 Text("deleteValue:" + this.deleteValue + " deleteOffset:" + this.deleteOffset).width('100%').height(25) 475 .borderRadius(15).padding({ left: 15 }).backgroundColor('rgba(0, 0, 0, 0.1)').maxLines(1) 476 .textOverflow({ overflow: TextOverflow.MARQUEE }); 477 Text("deleteDirection:" + (this.deleteDirection == 0 ? "BACKWARD" : "FORWARD")).width('100%').height(25) 478 .borderRadius(15).padding({ left: 15 }).backgroundColor('rgba(0, 0, 0, 0.1)').maxLines(1) 479 .textOverflow({ overflow: TextOverflow.MARQUEE }); 480 AtomicServiceSearch({ 481 select: { 482 options: [ 483 { value: 'Select1', icon: $r("app.media.sweep") }, 484 { value: 'Select2', icon: $r("app.media.sweep") }, 485 { value: 'Select3', icon: $r("app.media.sweep") }, 486 { value: 'Select4', icon: $r("app.media.sweep") } 487 ], 488 selected: -1, 489 selectValue: 'Select1', 490 onSelect: (index: number) => { 491 if (index === 0) { 492 this.alert('Select1'); 493 } else if (index === 1) { 494 this.alert('Select2'); 495 } else if (index === 2) { 496 this.alert('Select3'); 497 } else if (index === 3) { 498 this.alert('Select4'); 499 } 500 }, 501 }, 502 search: { 503 onSubmit: (value: string) => { 504 this.submitValue = value 505 }, 506 onChange: (value: string) => { 507 this.changeValue = value 508 }, 509 onCopy: () => { 510 this.alert('onCopy'); 511 }, 512 onCut: () => { 513 this.alert('onCut'); 514 }, 515 onPaste: () => { 516 this.alert('onPaste'); 517 }, 518 onTextSelectionChange: (selectionStart: number, selectionEnd: number) => { 519 this.startIndex = selectionStart 520 this.endIndex = selectionEnd 521 }, 522 onContentScroll: (totalOffsetX: number, totalOffsetY: number) => { 523 this.offsetX = totalOffsetX 524 this.offsetY = totalOffsetY 525 }, 526 onEditChange: (data: boolean) => { 527 this.value = data ? 'true' : 'false' 528 }, 529 onWillInsert: (info: InsertValue) => { 530 this.insertValue = info.insertValue 531 return true; 532 }, 533 onDidInsert: (info: InsertValue) => { 534 this.insertOffset = info.insertOffset 535 }, 536 onWillDelete: (info: DeleteValue) => { 537 this.deleteValue = info.deleteValue 538 info.direction 539 return true; 540 }, 541 onDidDelete: (info: DeleteValue) => { 542 this.deleteOffset = info.deleteOffset 543 this.deleteDirection = info.direction 544 } 545 } 546 }) 547 } 548 }.padding({ left: 16, right: 16 }) 549 } 550 551 private alert(message: string): void { 552 this.getUIContext().showAlertDialog({ message: message }); 553 } 554} 555``` 556 557 558 559 560### Example 5: Customizing the Style of AtomicServiceSearch 561This example demonstrates how to use the **search**, **select**, **value**, and **placeholder** parameters to customize the style of the **AtomicServiceSearch** component. 562 563```ts 564import { AtomicServiceSearch, SearchParams, SelectParams } from '@kit.ArkUI'; 565 566@Entry 567@Component 568struct Index { 569 @State private placeholder: string = 'Type to Search...'; 570 @State private defaultValue: string = 'default'; 571 @State private search?: SearchParams = {}; 572 @State private select?: SelectParams = { 573 options: [ 574 { value: 'Select1', icon: $r("app.media.sweep") }, 575 { value: 'Select2', icon: $r("app.media.sweep") }, 576 { value: 'Select3', icon: $r("app.media.sweep") }, 577 { value: 'Select4', icon: $r("app.media.sweep") } 578 ], 579 selected: -1, 580 selectValue: 'Select1', 581 onSelect: (index: number) => { 582 if (index === 0) { 583 this.alert('Select1'); 584 } else if (index === 1) { 585 this.alert('Select2'); 586 } else if (index === 2) { 587 this.alert('Select3'); 588 } else if (index === 3) { 589 this.alert('Select4'); 590 } 591 } 592 }; 593 594 build() { 595 Column({ space: 8 }) { 596 Text('Customizing styles').alignSelf(ItemAlign.Start).decoration({ 597 type: TextDecorationType.Underline, 598 color: Color.Black, 599 style: TextDecorationStyle.SOLID 600 }).margin({ top: 20, bottom: 20 }) 601 602 AtomicServiceSearch({ 603 value: this.defaultValue, 604 placeholder: this.placeholder, 605 select: this.select, 606 search: this.search, 607 operation: { 608 independentItem: { 609 value: $r(`app.media.dingding`), 610 action: () => { 611 this.alert('Notification'); 612 } 613 } 614 } 615 }) 616 Button("Change placeholder") 617 .width('100%') 618 .type(ButtonType.Normal) 619 .borderRadius(20) 620 .onClick(() => { 621 if (this.placeholder === 'Search...') { 622 this.placeholder = 'Type to Search...'; 623 } else { 624 this.placeholder = 'Search...'; 625 } 626 }); 627 Button("Change defaultValue") 628 .width('100%') 629 .type(ButtonType.Normal) 630 .borderRadius(20) 631 .onClick(() => { 632 if (this.defaultValue === 'value') { 633 this.defaultValue = 'defaultValue'; 634 } else { 635 this.defaultValue = 'value'; 636 } 637 }); 638 Button("Change selection area style") 639 .width('100%') 640 .type(ButtonType.Normal) 641 .borderRadius(20) 642 .onClick(() => { 643 this.select = { 644 options: [ 645 { value: 'Option 1', icon: $r("app.media.dingding") }, 646 { value: 'Option 2', icon: $r("app.media.dingding") }, 647 ], 648 selected: -1, 649 selectValue: 'Option 1', 650 onSelect: (index: number) => { 651 if (index === 0) { 652 this.alert('Option 1'); 653 } else if (index === 1) { 654 this.alert('Option 2'); 655 } 656 } 657 }; 658 }); 659 660 Button("Change search area style") 661 .width('100%') 662 .type(ButtonType.Normal) 663 .borderRadius(20) 664 .onClick(() => { 665 this.search = { 666 componentBackgroundColor: '#e0eee8' 667 } 668 }); 669 }.padding({ left: 16, right: 16 }) 670 } 671 672 private alert(message: string): void { 673 this.getUIContext().showAlertDialog({ message: message }); 674 } 675} 676``` 677 678 679 680 681 682 683### Example 6: Setting the Caret Position Using controller 684This 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. 685 686 687```ts 688import { AtomicServiceSearch } from '@kit.ArkUI'; 689 690@Entry 691@Component 692struct Index { 693 controller: SearchController = new SearchController(); 694 695 build() { 696 Column({ space : 10 }) { 697 Text('Setting the caret position using controller').alignSelf(ItemAlign.Start).decoration({ 698 type: TextDecorationType.Underline, 699 color: Color.Black, 700 style: TextDecorationStyle.SOLID 701 }).margin({ top: 20, bottom: 20 }) 702 703 AtomicServiceSearch( 704 { 705 value: 'Default Value', 706 placeholder: 'Type to Search...', 707 controller: this.controller, 708 search: { 709 searchButton: { 710 searchButtonValue: 'SEARCH', 711 options: { fontSize: '12fp', fontColor: '#ff0e1216' } 712 } 713 } 714 }, 715 ); 716 Button('caretPosition to 1').onClick(() => { 717 this.controller.caretPosition(1); 718 }).width('100%') 719 Button('stopEditing').onClick(() => { 720 this.controller.stopEditing(); 721 }).width('100%') 722 Button('Selection [0,3]').onClick(() => { 723 this.controller.setTextSelection(0, 3) 724 }).width('100%') 725 }.padding({ left: 16, right: 16 }) 726 } 727 728 public alert(message: string): void { 729 this.getUIContext().showAlertDialog({ message: message }); 730 } 731} 732``` 733 734 735 736 737 738 739### Example 7: Setting the Enter Key Type 740This example demonstrates how to use the **enterKeyType** attribute to dynamically change the effect of the Enter key on the soft keyboard. 741 742```ts 743import { AtomicServiceSearch } from '@kit.ArkUI'; 744 745@Entry 746@Component 747struct Index { 748 @State enterTypes: Array<EnterKeyType> = [EnterKeyType.Go, EnterKeyType.Search, EnterKeyType.Send, EnterKeyType.Done, EnterKeyType.Next, EnterKeyType.PREVIOUS, EnterKeyType.NEW_LINE] 749 @State index: number = 0 750 751 build() { 752 Column({ space : 10 }) { 753 Text('Enter key type as search').alignSelf(ItemAlign.Start).decoration({ 754 type: TextDecorationType.Underline, 755 color: Color.Black, 756 style: TextDecorationStyle.SOLID 757 }).margin({ top: 20, bottom: 20 }) 758 759 AtomicServiceSearch({ 760 placeholder: 'Enter key type as search', 761 search: { 762 enterKeyType: this.enterTypes[this.index] 763 } 764 }) 765 766 Button('Change EnterKeyType').onClick(() => { 767 this.index = (this.index + 1) % this.enterTypes.length; 768 }).width('100%') 769 770 }.padding({ left: 16, right: 16 }) 771 } 772 773 public alert(message: string): void { 774 this.getUIContext().showAlertDialog({ message: message }); 775 } 776} 777``` 778 779 780 781 782 783### Example 8: Setting Text Feature Effects 784This example demonstrates how to use the **fontFeature** attribute to display text with various typographic features. 785 786```ts 787import { AtomicServiceSearch } from '@kit.ArkUI'; 788 789@Entry 790@Component 791struct Index { 792 build() { 793 Column({ space : 10 }) { 794 Text('Setting text feature effects').alignSelf(ItemAlign.Start).decoration({ 795 type: TextDecorationType.Underline, 796 color: Color.Black, 797 style: TextDecorationStyle.SOLID 798 }).margin({ top: 20, bottom: 20 }) 799 800 AtomicServiceSearch({ 801 value: 'This is ss01 on : 0123456789', 802 search: { 803 fontFeature: "\"ss01\" on" 804 } 805 }); 806 807 AtomicServiceSearch({ 808 value: 'This is ss01 off : 0123456789', 809 search: { 810 fontFeature: "\"ss01\" off" 811 } 812 }); 813 814 AtomicServiceSearch({ 815 value: 'fiabc1234567DEFGHIJKLMN', 816 search: { 817 fontFeature: "\"frac\" on" 818 } 819 }); 820 821 AtomicServiceSearch({ 822 value: 'fiabc1234567DEFGHIJKLMN', 823 search: { 824 fontFeature: "\"frac\" off" 825 } 826 }); 827 }.padding({ left: 16, right: 16 }) 828 } 829 830 public alert(message: string): void { 831 this.getUIContext().showAlertDialog({ message: message }); 832 } 833} 834``` 835 836 837 838 839 840### Example 9: Setting Text Auto-Adaptation 841This example demonstrates how to use the **minFontSize** and **maxFontSize** attributes to implement the text auto-adaptation features. 842 843```ts 844import { AtomicServiceSearch } from '@kit.ArkUI'; 845 846@Entry 847@Component 848struct Index { 849 build() { 850 Column({ space : 10 }) { 851 Text('Setting text auto-adaptation').alignSelf(ItemAlign.Start).decoration({ 852 type: TextDecorationType.Underline, 853 color: Color.Black, 854 style: TextDecorationStyle.SOLID 855 }).margin({ top: 20, bottom: 20 }) 856 857 AtomicServiceSearch({ 858 value: 'This is the text without the adaptive font', 859 }).width('80%').height(40).borderWidth(1).borderRadius(20) 860 861 AtomicServiceSearch({ 862 value: 'This is the text without the adaptive font', 863 search: { 864 minFontSize: 4, 865 maxFontSize: 40 866 } 867 }).width('80%').height(40).borderWidth(1).borderRadius(20) 868 }.padding({ left: 16, right: 16 }) 869 } 870 871 public alert(message: string): void { 872 this.getUIContext().showAlertDialog({ message: message }); 873 } 874} 875``` 876 877 878 879 880 881### Example 10: Setting Custom Menu Extensions 882This 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. 883 884```ts 885import { AtomicServiceSearch } from '@kit.ArkUI'; 886 887@Entry 888@Component 889struct Index { 890 onCreateMenu = (menuItems: Array<TextMenuItem>) => { 891 let item1: TextMenuItem = { 892 content: 'custom1', 893 icon: $r('app.media.startIcon'), 894 id: TextMenuItemId.of('custom1'), 895 } 896 let item2: TextMenuItem = { 897 content: 'custom2', 898 id: TextMenuItemId.of('custom2'), 899 icon: $r('app.media.startIcon'), 900 } 901 menuItems.push(item1) 902 menuItems.unshift(item2) 903 return menuItems 904 } 905 906 onMenuItemClick = (menuItem: TextMenuItem, textRange: TextRange) => { 907 if (menuItem.id.equals(TextMenuItemId.of("custom2"))) { 908 console.log("Intercept id: custom2 start:" + textRange.start + "; end:" + textRange.end) 909 return true 910 } 911 if (menuItem.id.equals(TextMenuItemId.COPY)) { 912 console.log("Intercept COPY start:" + textRange.start + "; end:" + textRange.end) 913 return true 914 } 915 if (menuItem.id.equals(TextMenuItemId.SELECT_ALL)) { 916 console.log("Do not intercept SELECT_ALL start:" + textRange.start + "; end:" + textRange.end) 917 return false 918 } 919 return false 920 } 921 922 @State editMenuOptions: EditMenuOptions = { 923 onCreateMenu: this.onCreateMenu, onMenuItemClick: this.onMenuItemClick 924 } 925 926 build() { 927 Column({ space : 10 }) { 928 Text('Setting custom menu extensions').alignSelf(ItemAlign.Start).decoration({ 929 type: TextDecorationType.Underline, 930 color: Color.Black, 931 style: TextDecorationStyle.SOLID 932 }).margin({ top: 20, bottom: 20 }) 933 934 AtomicServiceSearch({ 935 value:'Default input', 936 search: { 937 editMenuOptions : this.editMenuOptions 938 } 939 }) 940 }.padding({ left: 16, right: 16 }) 941 } 942 943 public alert(message: string): void { 944 this.getUIContext().showAlertDialog({ message: message }); 945 } 946} 947``` 948 949 950 951 952 953 954 955### Example 11: Setting the Horizontal Alignment, Caret Style, and Background Color of the Selected Text 956This example shows how to set the horizontal alignment, caret style, and background color of the selected text using **textAlign**, **caretStyle**, and **selectedBackgroundColor**. 957 958```ts 959import { AtomicServiceSearch } from '@kit.ArkUI'; 960 961@Entry 962@Component 963struct Index { 964 build() { 965 Column() { 966 Text('Setting horizontal alignment/caret style/background color of selected text').alignSelf(ItemAlign.Start).decoration({ 967 type: TextDecorationType.Underline, 968 color: Color.Black, 969 style: TextDecorationStyle.SOLID 970 }).margin({ top: 20, bottom: 20 }) 971 972 AtomicServiceSearch({ 973 value: 'Search textAlign sample', 974 search: { 975 textAlign: TextAlign.Center, 976 caretStyle: { width: 3, color: Color.Green }, 977 selectedBackgroundColor: Color.Gray 978 } 979 }) 980 }.padding({ left: 16, right: 16 }) 981 } 982 983 public alert(message: string): void { 984 this.getUIContext().showAlertDialog({ message: message }); 985 } 986} 987``` 988 989 990 991 992 993### Example 12: Setting Input Filtering 994This example shows how to set input filtering using **inputFilter**. 995 996```ts 997import { AtomicServiceSearch } from '@kit.ArkUI'; 998 999@Entry 1000@Component 1001struct Index { 1002 @State filterValue: string = ''; 1003 1004 build() { 1005 Column() { 1006 Column({ space: 10 }) { 1007 Text('Setting input filtering').alignSelf(ItemAlign.Start).decoration({ 1008 type: TextDecorationType.Underline, 1009 color: Color.Black, 1010 style: TextDecorationStyle.SOLID 1011 }).margin({ top: 20, bottom: 20 }) 1012 AtomicServiceSearch({ 1013 placeholder: 'please enter...', 1014 search: { 1015 inputFilter: { 1016 inputFilterValue : '[a-z]', 1017 error: (filterValue: string) => {this.filterValue = filterValue} 1018 } 1019 } 1020 }) 1021 Text('Filter:' + this.filterValue).alignSelf(ItemAlign.Start) 1022 1023 } 1024 }.padding({ left: 16, right: 16 }) 1025 } 1026 1027 public alert(message: string): void { 1028 this.getUIContext().showAlertDialog({ message: message }); 1029 } 1030} 1031``` 1032 1033 1034
