1#  Search
2
3The **Search** component provides an area for users to enter search queries.
4
5> **NOTE**
6>
7> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
8
9## Child Components
10
11Not supported
12
13## APIs
14
15Search(options?: { value?: string, placeholder?: ResourceStr, icon?: string, controller?: SearchController })
16
17**Atomic service API**: This API can be used in atomic services since API version 11.
18
19**System capability**: SystemCapability.ArkUI.ArkUI.Full
20
21**Parameters**
22
23| Name     | Type        | Mandatory| Description       |
24| ----------- | ------------- | ---- | ------------- |
25| value       | string                                               | No  | Sets the text input in the search text box.<br>Since API version 10, this parameter supports two-way binding through [$$](../../../quick-start/arkts-two-way-sync.md).|
26| placeholder | [ResourceStr](ts-types.md#resourcestr)<sup>10+</sup> | No  | Text displayed when there is no input.                                    |
27| icon        | string                                               | No  | Path to the search icon. By default, the system search icon is used.<br>**NOTE**<br>The icon data source can be a local or online image.<br>- The supported formats include PNG, JPG, BMP, SVG, GIF, pixelmap, and HEIF.<br>- The Base64 string is supported in the following format: data:image/[png\|jpeg\|bmp\|webp\|heif];base64,[base64 data], where *[base64 data]* is a Base64 string.<br>If this attribute and the **searchIcon** attribute are both set, the **searchIcon** attribute takes precedence.|
28| controller  | [SearchController](#searchcontroller) | No  | Controller of the **Search** component.                                      |
29
30## Attributes
31
32In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
33
34### searchButton
35
36searchButton(value: string, option?: SearchButtonOptions)
37
38Sets the text on the search button located next to the search text box.
39
40Clicking the search button triggers both **onSubmit** and **onClick** callbacks.
41
42**Atomic service API**: This API can be used in atomic services since API version 11.
43
44**System capability**: SystemCapability.ArkUI.ArkUI.Full
45
46**Parameters**
47
48| Name| Type                                                 | Mandatory| Description                        |
49| ------ | ----------------------------------------------------- | ---- | ---------------------------- |
50| value  | string                                                | Yes  | Text on the search button located next to the search text box.|
51| option | [SearchButtonOptions](#searchbuttonoptions10) | No  | Font of the search text box.<br>Default value:<br>{<br>fontSize: '16fp',<br>fontColor: '#ff3f97e9'<br>}         |
52
53### placeholderColor
54
55placeholderColor(value: ResourceColor)
56
57Sets the placeholder text color.
58
59**Atomic service API**: This API can be used in atomic services since API version 11.
60
61**System capability**: SystemCapability.ArkUI.ArkUI.Full
62
63**Parameters**
64
65| Name| Type                                      | Mandatory| Description                                            |
66| ------ | ------------------------------------------ | ---- | ------------------------------------------------ |
67| value  | [ResourceColor](ts-types.md#resourcecolor) | Yes  | Placeholder text color.<br>Default value: **'#99182431'**|
68
69### placeholderFont
70
71placeholderFont(value?: Font)
72
73Sets the placeholder text style, including the font size, font width, font family, and font style. Currently, only the default font family is supported.
74
75**Atomic service API**: This API can be used in atomic services since API version 11.
76
77**System capability**: SystemCapability.ArkUI.ArkUI.Full
78
79**Parameters**
80
81| Name| Type                    | Mandatory| Description                 |
82| ------ | ------------------------ | ---- | --------------------- |
83| value  | [Font](ts-types.md#font) | No  | Placeholder text style.|
84
85### textFont
86
87textFont(value?: Font)
88
89Sets the 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.
90
91**Atomic service API**: This API can be used in atomic services since API version 11.
92
93**System capability**: SystemCapability.ArkUI.ArkUI.Full
94
95**Parameters**
96
97| Name| Type                    | Mandatory| Description                  |
98| ------ | ------------------------ | ---- | ---------------------- |
99| value  | [Font](ts-types.md#font) | No  | Text font of the search text box.|
100
101### textAlign<sup>9+</sup>
102
103textAlign(value: TextAlign)
104
105Sets the text alignment mode in the search text box. Currently, the following alignment modes are supported: **Start**, **Center**, and **End**.
106
107**Atomic service API**: This API can be used in atomic services since API version 11.
108
109**System capability**: SystemCapability.ArkUI.ArkUI.Full
110
111**Parameters**
112
113| Name| Type                                       | Mandatory| Description                                                  |
114| ------ | ------------------------------------------- | ---- | ------------------------------------------------------ |
115| value  | [TextAlign](ts-appendix-enums.md#textalign) | Yes  | Text alignment mode in the search text box.<br>Default value: **TextAlign.Start**|
116
117### copyOption<sup>9+</sup>
118
119copyOption(value: CopyOptions)
120
121Sets whether copy and paste is allowed. If this attribute is set to **CopyOptions.None**, the text can be pasted, but copy or cut is not allowed. 
122
123Dragging is not allowed when **CopyOptions.None** is set.
124
125**Atomic service API**: This API can be used in atomic services since API version 11.
126
127**System capability**: SystemCapability.ArkUI.ArkUI.Full
128
129**Parameters**
130
131| Name| Type                                            | Mandatory| Description                                                        |
132| ------ | ------------------------------------------------ | ---- | ------------------------------------------------------------ |
133| value  | [CopyOptions](ts-appendix-enums.md#copyoptions9) | Yes  | Whether copy and paste is allowed.<br>Default value: **CopyOptions.LocalDevice**|
134
135### searchIcon<sup>10+</sup>
136
137searchIcon(value: IconOptions | SymbolGlyphModifier)
138
139Sets the style of the search icon on the left.
140
141**Atomic service API**: This API can be used in atomic services since API version 11.
142
143**System capability**: SystemCapability.ArkUI.ArkUI.Full
144
145**Parameters**
146
147| Name| Type                                 | Mandatory| Description              |
148| ------ | ------------------------------------- | ---- | ------------------ |
149| value  | [IconOptions](#iconoptions10) \| [SymbolGlyphModifier](ts-universal-attributes-attribute-modifier.md) | Yes  | Style of the search icon on the left.<!--RP1--><br>Default value in light mode:<br>{<br>size: '16vp',<br>color: '#99182431',<br>src: ' '<br>}<br>Default value in dark mode:<br>{<br>size: '16vp',<br>color: '#99ffffff',<br>src: ' '<br>} <!--RP1End-->|
150
151### cancelButton<sup>10+</sup>
152
153cancelButton(value: CancelButtonOptions | CancelButtonSymbolOptions)
154
155Sets the style of the Cancel button on the right.
156
157**Atomic service API**: This API can be used in atomic services since API version 11.
158
159**System capability**: SystemCapability.ArkUI.ArkUI.Full
160
161**Parameters**
162
163| Name| Type                                                        | Mandatory| Description                                                        |
164| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
165| value  | [CancelButtonOptions](#cancelbuttonoptions12) \| [CancelButtonSymbolOptions](#cancelbuttonsymboloptions12) | Yes  | Style of the Cancel button on the right.<br>Default value:<br>{<br>style: CancelButtonStyle.INPUT,<br>icon: {<br>size: '16vp',<br>color: '#99ffffff',<br>src: ' '<br>}<br>}<br>When **style** is set to **CancelButtonStyle.CONSTANT**, the Cancel button is always displayed.|
166
167### fontColor<sup>10+</sup>
168
169fontColor(value: ResourceColor)
170
171Sets the font color of the input text. [Universal text attributes](ts-universal-attributes-text-style.md) **fontSize**, **fontStyle**, **fontWeight**, and **fontFamily** are set in the [textFont](#textfont) attribute.
172
173**Atomic service API**: This API can be used in atomic services since API version 11.
174
175**System capability**: SystemCapability.ArkUI.ArkUI.Full
176
177**Parameters**
178
179| Name| Type                                      | Mandatory| Description                                           |
180| ------ | ------------------------------------------ | ---- | ----------------------------------------------- |
181| value  | [ResourceColor](ts-types.md#resourcecolor) | Yes  | Font color of the input text.<br>Default value: **'#FF182431'**|
182
183### caretStyle<sup>10+</sup>
184
185caretStyle(value: CaretStyle)
186
187Sets the caret style.
188
189**Atomic service API**: This API can be used in atomic services since API version 11.
190
191**System capability**: SystemCapability.ArkUI.ArkUI.Full
192
193**Parameters**
194
195| Name| Type                               | Mandatory| Description                                                        |
196| ------ | ----------------------------------- | ---- | ------------------------------------------------------------ |
197| value  | [CaretStyle](ts-text-common.md#caretstyle10) | Yes  | Caret style.<br>Default value:<br>{<br>width: '1.5vp',<br>color: '#007DFF'<br>} |
198
199>  **NOTE**    
200>   Since API version 12, this API can be used to set the text handle color, which is the same as the caret color.
201
202### enableKeyboardOnFocus<sup>10+</sup>
203
204enableKeyboardOnFocus(value: boolean)
205
206Sets whether to enable the input method when the component obtains focus in a way other than clicking.
207
208 
209
210**Atomic service API**: This API can be used in atomic services since API version 11.
211
212**System capability**: SystemCapability.ArkUI.ArkUI.Full
213
214**Parameters**
215
216| Name| Type   | Mandatory| Description                                           |
217| ------ | ------- | ---- | ----------------------------------------------- |
218| value  | boolean | Yes  | Whether to enable the input method when the component obtains focus.<br>Default value: **true**|
219
220### selectionMenuHidden<sup>10+</sup>
221
222selectionMenuHidden(value: boolean)
223
224Sets whether to hide the system text selection menu.
225
226**Atomic service API**: This API can be used in atomic services since API version 11.
227
228**System capability**: SystemCapability.ArkUI.ArkUI.Full
229
230**Parameters**
231
232| Name| Type   | Mandatory| Description                                                        |
233| ------ | ------- | ---- | ------------------------------------------------------------ |
234| value  | boolean | Yes  | Whether to hide the system text selection menu.<br>**true**: Tapping, long-pressing, double-tapping, triple-tapping, or right-clicking the text box will not trigger the system text selection menu.<br>**false**: Tapping, long-pressing, double-tapping, triple-tapping, or right-clicking the text box will trigger the system text selection menu.<br>Default value: **false**|
235
236### customKeyboard<sup>10+</sup>
237
238customKeyboard(value: CustomBuilder, options?: KeyboardOptions)
239
240Custom keyboard.
241
242When a custom keyboard is set, activating the text box opens the specified custom component, instead of the system input method.
243
244The custom keyboard's height can be set through the **height** attribute of the custom component's root node, and its width is fixed at the default value.
245
246The custom keyboard is presented by overlaying the original screen. It is not compressed or lifted if avoid mode is not enabled or avoidance is not needed for the text box.
247
248The custom keyboard cannot obtain the focus, but it blocks gesture events.
249
250By default, the custom keyboard is closed when the input component loses the focus. You can also use the [stopEditing](#stopediting10) API to close the keyboard.
251
252When a custom keyboard is set, the text box does not support camera input, even when the device supports.
253
254**Atomic service API**: This API can be used in atomic services since API version 11.
255
256**System capability**: SystemCapability.ArkUI.ArkUI.Full
257
258**Parameters**
259
260| Name               | Type                                       | Mandatory| Description                            |
261| --------------------- | ------------------------------------------- | ---- | -------------------------------- |
262| value                 | [CustomBuilder](ts-types.md#custombuilder8) | Yes  | Custom keyboard.                    |
263| options<sup>12+</sup> | [KeyboardOptions](ts-basic-components-richeditor.md#keyboardoptions12)       | No  | Whether to support keyboard avoidance.|
264
265### type<sup>11+</sup>
266
267type(value: SearchType)
268
269Sets the text box type.
270
271<br>**Atomic service API**: This API can be used in atomic services since API version 12.
272
273**System capability**: SystemCapability.ArkUI.ArkUI.Full
274
275**Parameters**
276
277| Name| Type                               | Mandatory| Description                       |
278| ------ | ----------------------------------- | ---- | -------------------------- |
279| value  | [SearchType](#searchtype11) | Yes  | Text box type.<br>Default value: **SearchType.Normal**|
280
281### maxLength<sup>11+</sup>
282
283maxLength(value: number)
284
285Sets the maximum number of characters for text input. By default, there is no maximum number of characters. When the maximum number is reached, no more characters can be entered.
286
287**Atomic service API**: This API can be used in atomic services since API version 12.
288
289**System capability**: SystemCapability.ArkUI.ArkUI.Full
290
291**Parameters**
292
293| Name| Type                               | Mandatory| Description                  |
294| ------ | ----------------------------------- | ---- | ---------------------- |
295| value  | number | Yes  | Maximum number of characters for text input.|
296
297### enterKeyType<sup>12+</sup>
298
299enterKeyType(value: EnterKeyType)
300
301Sets the type of the Enter key.
302
303**Atomic service API**: This API can be used in atomic services since API version 12.
304
305**System capability**: SystemCapability.ArkUI.ArkUI.Full
306
307**Parameters**
308
309| Name| Type                                            | Mandatory| Description                                              |
310| ------ | ------------------------------------------------ | ---- | -------------------------------------------------- |
311| value  | [EnterKeyType](ts-types.md#enterkeytype) | Yes  | Type of the Enter key.<br>Default value: **EnterKeyType.Search**|
312
313### lineHeight<sup>12+</sup>
314
315lineHeight(value: number | string | Resource)
316
317Sets the text line height. If the value is less than or equal to **0**, the line height is not limited and the font size is adaptive. If the value is of the number type, the unit fp is used.
318
319**Atomic service API**: This API can be used in atomic services since API version 12.
320
321**System capability**: SystemCapability.ArkUI.ArkUI.Full
322
323**Parameters**
324
325| Name| Type                                                        | Mandatory| Description            |
326| ------ | ------------------------------------------------------------ | ---- | ---------------- |
327| value  | number \| string \| [Resource](ts-types.md#resource) | Yes  | Text line height.|
328
329### decoration<sup>12+</sup>
330
331decoration(value: TextDecorationOptions)
332
333Sets the color, type, and style of the text decorative line.
334
335**Atomic service API**: This API can be used in atomic services since API version 12.
336
337**System capability**: SystemCapability.ArkUI.ArkUI.Full
338
339**Parameters**
340
341| Name| Type                                                        | Mandatory| Description                                                        |
342| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
343| value  | [TextDecorationOptions](ts-types.md#textdecorationoptions12) | Yes  | Text decorative line options.<br>Default value: {<br> type: TextDecorationType.None,<br> color: Color.Black,<br> style: TextDecorationStyle.SOLID <br>} |
344
345### letterSpacing<sup>12+</sup>
346
347letterSpacing(value: number | string | Resource)
348
349Sets the letter spacing for a text style. If the value specified is a percentage or 0, the default value is used.
350
351If 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.
352
353**Atomic service API**: This API can be used in atomic services since API version 12.
354
355**System capability**: SystemCapability.ArkUI.ArkUI.Full
356
357**Parameters**
358
359| Name| Type                      | Mandatory| Description          |
360| ------ | -------------------------- | ---- | -------------- |
361| value  | number \| string \| [Resource](ts-types.md#resource) | Yes  | Letter spacing.|
362
363### fontFeature<sup>12+</sup>
364
365fontFeature(value: string)
366
367Sets the font feature, for example, monospaced digits.
368
369Format: normal \| \<feature-tag-value\>
370
371Format of **\<feature-tag-value\>**: \<string\> \[ \<integer\> \| on \| off ]
372
373There can be multiple **\<feature-tag-value\>** values, which are separated by commas (,).
374
375For example, the input format for monospaced clock fonts is "ss01" on.
376
377**Atomic service API**: This API can be used in atomic services since API version 12.
378
379**System capability**: SystemCapability.ArkUI.ArkUI.Full
380
381**Parameters**
382
383| Name| Type  | Mandatory| Description          |
384| ------ | ------ | ---- | -------------- |
385| value  | string | Yes  | Font feature.|
386
387For details about the supported font features, see [Font Feature List](ts-basic-components-text.md#fontfeature12).
388Font features are advanced typographic features, such as ligatures and monospace, for OpenType fonts. They are typically used in custom fonts and require the support of the font itself.
389For more information about the font features, see [Low-level font feature settings control: the font-feature-settings property](https://www.w3.org/TR/css-fonts-3/#font-feature-settings-prop) and [The Complete CSS Demo for OpenType Features](https://sparanoid.com/lab/opentype-features/).
390
391### selectedBackgroundColor<sup>12+</sup>
392
393selectedBackgroundColor(value: ResourceColor)
394
395Sets the background color of the selected text. If the opacity is not set, a 20% opacity will be used.
396
397**Atomic service API**: This API can be used in atomic services since API version 12.
398
399**System capability**: SystemCapability.ArkUI.ArkUI.Full
400
401**Parameters**
402
403| Name| Type                                      | Mandatory| Description                                      |
404| ------ | ------------------------------------------ | ---- | ------------------------------------------ |
405| value  | [ResourceColor](ts-types.md#resourcecolor) | Yes  | Background color of the selected text.<br>By default, a 20% opacity is applied.|
406
407### inputFilter<sup>12+</sup>
408
409inputFilter(value: ResourceStr, error?:  Callback< string >)
410
411Sets the 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.
412
413If **inputFilter** is set and the entered characters are not null, the filtering effect attached to the text box type (specified through the **type** attribute) does not take effect.
414
415**Atomic service API**: This API can be used in atomic services since API version 12.
416
417**System capability**: SystemCapability.ArkUI.ArkUI.Full
418
419**Parameters**
420
421| Name| Type                                  | Mandatory| Description                              |
422| ------ | -------------------------------------- | ---- | ---------------------------------- |
423| value  | [ResourceStr](ts-types.md#resourcestr) | Yes  | Regular expression.                      |
424| error  |  Callback< string >     | No  | Filtered-out content to return when regular expression matching fails.|
425
426### textIndent<sup>12+</sup>
427
428textIndent(value: Dimension)
429
430Sets the indent of the first line text.
431
432**Atomic service API**: This API can be used in atomic services since API version 12.
433
434**System capability**: SystemCapability.ArkUI.ArkUI.Full
435
436**Parameters**
437
438| Name| Type                                | Mandatory| Description                        |
439| ------ | ----------------------------------- | ---- | ---------------------------- |
440| value  | [Dimension](ts-types.md#dimension10)| Yes  | Indent of the first line text.<br>Default value: **0**  |
441
442### minFontSize<sup>12+</sup>
443
444minFontSize(value: number | string | Resource)
445
446Sets the minimum font size.
447
448For the setting to take effect, this attribute must be used together with [maxFontSize](#maxfontsize12) or layout constraint settings.
449
450When the adaptive font size is used, the **fontSize** settings do not take effect.
451
452**Atomic service API**: This API can be used in atomic services since API version 12.
453
454**System capability**: SystemCapability.ArkUI.ArkUI.Full
455
456**Parameters**
457
458| Name| Type                                                        | Mandatory| Description              |
459| ------ | ------------------------------------------------------------ | ---- | ------------------ |
460| value  | number \| string \| [Resource](ts-types.md#resource) | Yes  | Minimum font size.|
461
462### maxFontSize<sup>12+</sup>
463
464maxFontSize(value: number | string | Resource)
465
466Sets the maximum font size.
467
468For the setting to take effect, this attribute must be used together with [minFontSize](#minfontsize12) or layout constraint settings.
469
470When the adaptive font size is used, the **fontSize** settings do not take effect.
471
472**Atomic service API**: This API can be used in atomic services since API version 12.
473
474**System capability**: SystemCapability.ArkUI.ArkUI.Full
475
476**Parameters**
477
478| Name| Type                                                        | Mandatory| Description              |
479| ------ | ------------------------------------------------------------ | ---- | ------------------ |
480| value  | number \| string \| [Resource](ts-types.md#resource) | Yes  | Maximum font size.|
481
482### editMenuOptions<sup>12+</sup>
483
484editMenuOptions(editMenu: EditMenuOptions)
485
486Sets the extended options of the custom context menu on selection, including the text content, icon, and callback.
487
488**Atomic service API**: This API can be used in atomic services since API version 12.
489
490**System capability**: SystemCapability.ArkUI.ArkUI.Full
491
492**Parameters**
493
494| Name| Type                                         | Mandatory| Description                                         |
495| ------ | --------------------------------------------- | ---- | --------------------------------------------- |
496| editMenu  | [EditMenuOptions](ts-text-common.md#editmenuoptions) | Yes  | Extended options of the custom context menu on selection.|
497
498### enablePreviewText<sup>12+</sup>
499
500enablePreviewText(enable: boolean)
501
502Sets whether to enable preview text.
503
504Preview text is in a temporary state and does not support text interception. As such, it does not trigger **onWillInsert**, **onDidInsert**, **onWillDelete**, or **onDidDelete** callbacks.
505
506**Atomic service API**: This API can be used in atomic services since API version 12.
507
508**System capability**: SystemCapability.ArkUI.ArkUI.Full
509
510**Parameters**
511
512| Name| Type   | Mandatory| Description                              |
513| ------ | ------- | ---- | ---------------------------------- |
514| enable | boolean | Yes  | Whether to enable preview text.<br>Default value: **true**|
515
516## IconOptions<sup>10+</sup>
517
518**Atomic service API**: This API can be used in atomic services since API version 11.
519
520**System capability**: SystemCapability.ArkUI.ArkUI.Full
521
522| Name| Type                                  | Mandatory| Description   |
523| ------ | ------------------------------------------ | ---- | ----------- |
524| size   | [Length](ts-types.md#length)               | No  | Icon size. It cannot be set in percentage.   |
525| color  | [ResourceColor](ts-types.md#resourcecolor) | No  | Icon color.   |
526| src    | [ResourceStr](ts-types.md#resourcestr)     | No  | Image source of the icon.|
527
528## SearchButtonOptions<sup>10+</sup>
529
530**Atomic service API**: This API can be used in atomic services since API version 11.
531
532**System capability**: SystemCapability.ArkUI.ArkUI.Full
533
534| Name   | Type                                  | Mandatory| Description        |
535| --------- | ------------------------------------------ | ---- | ---------------- |
536| fontSize  | [Length](ts-types.md#length)               | No  | Font size of the button. It cannot be set in percentage.|
537| fontColor | [ResourceColor](ts-types.md#resourcecolor) | No  | Font color of the button.|
538
539## CancelButtonStyle<sup>10+</sup>
540
541**Atomic service API**: This API can be used in atomic services since API version 11.
542
543**System capability**: SystemCapability.ArkUI.ArkUI.Full
544
545| Name                   | Description            |
546| ----------------------- | ---------------- |
547| CONSTANT  | The Cancel button is always displayed.|
548| INVISIBLE | The Cancel button is always hidden.|
549| INPUT     | The Cancel button is displayed when there is text input.|
550
551## SearchType<sup>11+</sup>
552
553**Atomic service API**: This API can be used in atomic services since API version 12.
554
555**System capability**: SystemCapability.ArkUI.ArkUI.Full
556
557| Name                | Value           | Description           |
558| ------------------ | ------ | ------------- |
559| NORMAL   | 0 | Normal input mode.<br>The value can contain digits, letters, underscores (_), spaces, and special characters.<br>**Atomic service API**: This API can be used in atomic services since API version 12.|
560| NUMBER   | 2 | Digit input mode.<br>**Atomic service API**: This API can be used in atomic services since API version 12.     |
561| PHONE_NUMBER | 3 | Phone number input mode.<br>In this mode, the following are allowed: digits, spaces, plus signs (+), hyphens (-), asterisks (*), and number signs (#); the length is not limited.<br>**Atomic service API**: This API can be used in atomic services since API version 12.|
562| EMAIL    | 5 | Email address input mode.<br>This mode accepts only digits, letters, underscores (_), dots (.), and the following special characters: ! # $ % & ' * + - / = ? ^ ` \{ \| \} ~ @ (which can only appear once)<br>**Atomic service API**: This API can be used in atomic services since API version 12.|
563| NUMBER_DECIMAL<sup>12+</sup>  | 12 | Number input mode with a decimal point.<br>The value can contain digits and one decimal point.<br>**Atomic service API**: This API can be used in atomic services since API version 12.|
564| URL<sup>12+</sup>  | 13 | URL input mode.<br>**Atomic service API**: This API can be used in atomic services since API version 12.|
565
566## CancelButtonOptions<sup>12+</sup>
567
568**Atomic service API**: This API can be used in atomic services since API version 12.
569
570**System capability**: SystemCapability.ArkUI.ArkUI.Full
571
572| Name   | Type                                  | Mandatory| Description        |
573| --------- | ------------------------------------------ | ---- | ---------------- |
574| style  | [CancelButtonStyle](#cancelbuttonstyle10)               | No  | Display state of the Cancel button on the right.|
575| icon | [IconOptions](#iconoptions10) | No  | Icon of the Cancel button on the right.|
576
577## CancelButtonSymbolOptions<sup>12+</sup>
578
579**Atomic service API**: This API can be used in atomic services since API version 12.
580
581**System capability**: SystemCapability.ArkUI.ArkUI.Full
582
583| Name   | Type                                  | Mandatory| Description        |
584| --------- | ------------------------------------------ | ---- | ---------------- |
585| style  | [CancelButtonStyle](#cancelbuttonstyle10)               | No  | Display state of the Cancel button on the right.|
586| icon | [SymbolGlyphModifier](ts-universal-attributes-attribute-modifier.md) | No  | Symbol icon of the Cancel button on the right.|
587
588## Events
589
590In addition to the [universal events](ts-universal-events-click.md), the following events are supported.
591
592### onSubmit
593
594onSubmit(callback: (value: string) => void)
595
596Invoked when users click the search icon or the search button, or touch the search button on a soft keyboard.
597
598**Atomic service API**: This API can be used in atomic services since API version 11.
599
600**System capability**: SystemCapability.ArkUI.ArkUI.Full
601
602**Parameters**
603
604| Name| Type  | Mandatory| Description                        |
605| ------ | ------ | ---- | ---------------------------- |
606| value  | string | Yes  | Current text input.|
607
608### onChange
609
610onChange(callback: EditableTextOnChangeCallback)
611
612Invoked when the input in the text box changes.
613
614**Atomic service API**: This API can be used in atomic services since API version 11.
615
616**System capability**: SystemCapability.ArkUI.ArkUI.Full
617
618**Parameters**
619
620| Name| Type  | Mandatory| Description                        |
621| ------ | ------ | ---- | ---------------------------- |
622| callback  | [EditableTextOnChangeCallback](ts-text-common.md#editabletextonchangecallback12) | Yes  | Callback invoked when the input in the text box changes.|
623
624### onCopy
625
626onCopy(callback: (value: string) => void)
627
628Invoked when a copy operation is performed.
629
630**Atomic service API**: This API can be used in atomic services since API version 11.
631
632**System capability**: SystemCapability.ArkUI.ArkUI.Full
633
634**Parameters**
635
636| Name| Type  | Mandatory| Description            |
637| ------ | ------ | ---- | ---------------- |
638| value  | string | Yes  | Text that is copied.|
639
640### onCut
641
642onCut(callback: (value: string) => void)
643
644Invoked when a cut operation is performed.
645
646**Atomic service API**: This API can be used in atomic services since API version 11.
647
648**System capability**: SystemCapability.ArkUI.ArkUI.Full
649
650**Parameters**
651
652| Name| Type  | Mandatory| Description            |
653| ------ | ------ | ---- | ---------------- |
654| value  | string | Yes  | Text that is cut.|
655
656### onPaste
657
658onPaste(callback: (value: string, event: PasteEvent) => void)
659
660Invoked when a paste operation is performed.
661
662**Atomic service API**: This API can be used in atomic services since API version 11.
663
664**System capability**: SystemCapability.ArkUI.ArkUI.Full
665
666**Parameters**
667
668| Name             | Type                                                        | Mandatory| Description                  |
669| ------------------- | ------------------------------------------------------------ | ---- | ---------------------- |
670| value               | string                                                       | Yes  | Text to be pasted.      |
671| event<sup>11+</sup> | [PasteEvent](ts-basic-components-richeditor.md#pasteevent11) | Yes  | Custom paste event.|
672
673### onTextSelectionChange<sup>10+</sup>
674
675onTextSelectionChange(callback: (selectionStart: number, selectionEnd: number) => void)
676
677Invoked when the position of the text selection changes or when the cursor position changes during the editing state.
678
679**Atomic service API**: This API can be used in atomic services since API version 11.
680
681**System capability**: SystemCapability.ArkUI.ArkUI.Full
682
683**Parameters**
684
685| Name        | Type  | Mandatory| Description                                             |
686| -------------- | ------ | ---- | ------------------------------------------------- |
687| selectionStart | number | Yes  | Start position of the text selection range. The start position of text in the text box is 0.|
688| selectionEnd   | number | Yes  | End position of the text selection range.                           |
689
690### onContentScroll<sup>10+</sup>
691
692onContentScroll(callback: (totalOffsetX: number, totalOffsetY: number) => void)
693
694Invoked when the text content is scrolled.
695
696**Atomic service API**: This API can be used in atomic services since API version 11.
697
698**System capability**: SystemCapability.ArkUI.ArkUI.Full
699
700**Parameters**
701
702| Name      | Type  | Mandatory| Description                              |
703| ------------ | ------ | ---- | ---------------------------------- |
704| totalOffsetX | number | Yes  | Offset in the X coordinate of the text in the content area, in px.|
705| totalOffsetY | number | Yes  | Offset in the Y coordinate of the text in the content area, in px.|
706
707### onEditChange<sup>12+</sup>
708
709onEditChange(callback: Callback< boolean >)
710
711Invoked when the input status changes. The text box is in the editing state when it has the caret placed in it, and is in the non-editing state otherwise. If the value of **isEditing** is **true**, the text box is in the editing state.
712
713**Atomic service API**: This API can be used in atomic services since API version 12.
714
715**System capability**: SystemCapability.ArkUI.ArkUI.Full
716
717**Parameters**
718
719| Name   | Type                               | Mandatory| Description                |
720| --------- | ---------------------------------- | ---- | -------------------- |
721| isEditing |  Callback< boolean > | Yes  | Whether the text box is in the editing state. The value **true** indicates that the text box is in the editing state.|
722
723### onWillInsert<sup>12+</sup>
724
725onWillInsert(callback: Callback\<InsertValue, boolean>)
726
727Invoked when text is about to be inserted.
728
729**Atomic service API**: This API can be used in atomic services since API version 12.
730
731**System capability**: SystemCapability.ArkUI.ArkUI.Full
732
733**Parameters**
734
735| Name| Type                                                        | Mandatory| Description              |
736| ------ | ------------------------------------------------------------ | ---- | ------------------ |
737| callback  | Callback\<[InsertValue](ts-text-common.md#insertvalue12), boolean> | Yes  | Callback invoked when text is about to be inserted.<br>It returns **true** if the text is inserted; returns **false** otherwise.<br>This callback is not invoked for text preview.<br>It is available only for system input methods.|
738
739### onDidInsert<sup>12+</sup>
740
741onDidInsert(callback: Callback\<InsertValue>)
742
743Invoked when text is inserted.
744
745**Atomic service API**: This API can be used in atomic services since API version 12.
746
747**System capability**: SystemCapability.ArkUI.ArkUI.Full
748
749**Parameters**
750
751| Name| Type                                                        | Mandatory| Description              |
752| ------ | ------------------------------------------------------------ | ---- | ------------------ |
753| callback  | Callback\<[InsertValue](ts-text-common.md#insertvalue12)> | Yes  | Callback invoked when text is inserted.<br>It is available only for system input methods.|
754
755### onWillDelete<sup>12+</sup>
756
757onWillDelete(callback: Callback\<DeleteValue, boolean>)
758
759Invoked when text is about to be deleted.
760
761**Atomic service API**: This API can be used in atomic services since API version 12.
762
763**System capability**: SystemCapability.ArkUI.ArkUI.Full
764
765**Parameters**
766
767| Name| Type                                                        | Mandatory| Description              |
768| ------ | ------------------------------------------------------------ | ---- | ------------------ |
769| callback  | Callback\<[DeleteValue](ts-text-common.md#deletevalue12), boolean> | Yes  | Callback invoked when text is about to be deleted.<br>It returns **true** if the text is deleted; returns **false** otherwise.<br>This callback is not invoked for text preview.<br>It is available only for system input methods.|
770
771### onDidDelete<sup>12+</sup>
772
773onDidDelete(callback: Callback\<DeleteValue>)
774
775Called when text is deleted.
776
777**Atomic service API**: This API can be used in atomic services since API version 12.
778
779**System capability**: SystemCapability.ArkUI.ArkUI.Full
780
781**Parameters**
782
783| Name| Type                                                        | Mandatory| Description              |
784| ------ | ------------------------------------------------------------ | ---- | ------------------ |
785| callback  | Callback\<[DeleteValue](ts-text-common.md#deletevalue12)> | Yes  | Callback invoked when text is deleted.<br>It is available only for system input methods.|
786
787## SearchController
788
789Inherits from [TextContentControllerBase](ts-types.md#textcontentcontrollerbase10).
790
791### Objects to Import
792```
793controller: SearchController = new SearchController()
794```
795
796### constructor<sup>8+</sup>
797
798constructor()
799
800A constructor used to create a **SearchController** object.
801
802**Atomic service API**: This API can be used in atomic services since API version 11.
803
804**System capability**: SystemCapability.ArkUI.ArkUI.Full
805
806### caretPosition<sup>8+</sup>
807
808caretPosition(value: number): void
809
810Sets the position of the caret.
811
812**Atomic service API**: This API can be used in atomic services since API version 11.
813
814**System capability**: SystemCapability.ArkUI.ArkUI.Full
815
816**Parameters**
817
818| Name| Type| Mandatory| Description                          |
819| ------ | -------- | ---- | ---------------------------------- |
820| value  | number   | Yes  | Length from the start of the character string to the position where the caret is located.|
821
822### stopEditing<sup>10+</sup>
823
824stopEditing(): void
825
826Exits the editing state.
827
828**Atomic service API**: This API can be used in atomic services since API version 11.
829
830**System capability**: SystemCapability.ArkUI.ArkUI.Full
831
832### setTextSelection<sup>12+</sup>
833
834setTextSelection(selectionStart: number, selectionEnd: number, options?: SelectionOptions): void;
835
836Sets the text selection range and highlights the selected text when the component is focused. This API works only when the value of **selectionStart** is less than that of **selectionEnd**.
837
838**Atomic service API**: This API can be used in atomic services since API version 12.
839
840**System capability**: SystemCapability.ArkUI.ArkUI.Full
841
842**Parameters**
843
844| Name        | Type| Mandatory| Description  |
845| -------------- | -------- | ---- | -------- |
846| selectionStart | number   | Yes  | Start position of the text selection range. The start position of text in the text box is 0.<br>A value less than 0 is handled as **0**. A value greater than the maximum text length is handled as the maximum text length.<br>|
847| selectionEnd   | number   | Yes  | End position of the text selection range.<br>A value less than 0 is handled as the value **0**. A value greater than the maximum text length is handled as the maximum text length.<br>|
848| options | [SelectionOptions](ts-types.md#selectionoptions12) | No   | Configuration options for text selection.<br>Default value: **MenuPolicy.DEFAULT**|
849
850>  **NOTE**
851>
852>  If **selectionStart** or **selectionEnd** is set to **undefined**, the value **0** will be used.
853>
854>  If **selectionMenuHidden** is set to **true** or a 2-in-1 device is used, calling **setTextSelection** does not display the context menu even when **options** is set to **MenuPolicy.SHOW**.
855>
856>  If the selected text contains an emoji, the emoji is selected when its start position is within the text selection range.
857
858##  Example
859
860### Example 1
861This example demonstrates the basic usage of **Search**.
862```ts
863// xxx.ets
864@Entry
865@Component
866struct SearchExample {
867  @State changeValue: string = ''
868  @State submitValue: string = ''
869  @State positionInfo: CaretOffset = { index: 0, x: 0, y: 0 }
870  controller: SearchController = new SearchController()
871
872  build() {
873    Column({space: 10}) {
874      Text('onSubmit:' + this.submitValue).fontSize(18).margin(15)
875      Text('onChange:' + this.changeValue).fontSize(18).margin(15)
876      Search({ value: this.changeValue, placeholder: 'Type to search...', controller: this.controller })
877        .searchButton('SEARCH')
878        .width('95%')
879        .height(40)
880        .backgroundColor('#F5F5F5')
881        .placeholderColor(Color.Grey)
882        .placeholderFont({ size: 14, weight: 400 })
883        .textFont({ size: 14, weight: 400 })
884        .onSubmit((value: string) => {
885          this.submitValue = value
886        })
887        .onChange((value: string) => {
888          this.changeValue = value
889        })
890        .margin(20)
891      Button('Set caretPosition 1')
892        .onClick(() => {
893          // Move the caret to after the first entered character.
894          this.controller.caretPosition(1)
895        })
896      Button('Get CaretOffset')
897        .onClick(() => {
898          this.positionInfo = this.controller.getCaretOffset()
899        })
900    }.width('100%')
901  }
902}
903```
904
905![search](figures/search.gif)
906
907### Example 2
908This example shows how to set the **searchButton**, **searchIcon**, and **cancelButton** attributes.
909```ts
910// xxx.ets
911@Entry
912@Component
913struct SearchExample {
914  @State changeValue: string = ''
915  @State submitValue: string = ''
916
917  build() {
918    Column() {
919      Text('onSubmit:' + this.submitValue).fontSize(18).margin(15)
920      Search({ value: this.changeValue, placeholder: 'Type to search...' })
921        .searchButton('SEARCH')
922        .searchIcon({
923          src: $r('app.media.search')
924        })
925        .cancelButton({
926          style: CancelButtonStyle.CONSTANT,
927          icon: {
928            src: $r('app.media.cancel')
929          }
930        })
931        .width('90%')
932        .height(40)
933        .maxLength(20)
934        .backgroundColor('#F5F5F5')
935        .placeholderColor(Color.Grey)
936        .placeholderFont({ size: 14, weight: 400 })
937        .textFont({ size: 14, weight: 400 })
938        .onSubmit((value: string) => {
939          this.submitValue = value
940        })
941        .onChange((value: string) => {
942          this.changeValue = value
943        })
944        .margin(20)
945    }.width('100%')
946  }
947}
948```
949
950![searchButton](figures/searchButton.gif)
951
952
953### Example 3
954This example illustrates how to bind a custom keyboard to the **Search** component.
955```ts
956// xxx.ets
957@Entry
958@Component
959struct SearchExample {
960  controller: SearchController = new SearchController()
961  @State inputValue: string = ""
962
963  // Create a custom keyboard component.
964  @Builder CustomKeyboardBuilder() {
965    Column() {
966      Button('x').onClick(() => {
967        // Disable the custom keyboard.
968        this.controller.stopEditing()
969      })
970      Grid() {
971        ForEach([1, 2, 3, 4, 5, 6, 7, 8, 9, '*', 0, '#'], (item: number | string) => {
972          GridItem() {
973            Button(item + "")
974              .width(110).onClick(() => {
975              this.inputValue += item
976            })
977          }
978        })
979      }.maxCount(3).columnsGap(10).rowsGap(10).padding(5)
980    }.backgroundColor(Color.Gray)
981  }
982
983  build() {
984    Column() {
985      Search({ controller: this.controller, value: this.inputValue})
986        // Bind the custom keyboard.
987        .customKeyboard(this.CustomKeyboardBuilder()).margin(10).border({ width: 1 })
988    }
989  }
990}
991```
992
993![customKeyboard](figures/searchCustomKeyboard.png)
994
995### Example 4
996This example shows how to set the **enterKeyType** attribute.
997```ts
998// xxx.ets
999@Entry
1000@Component
1001struct SearchExample {
1002  @State Text: string = ''
1003  @State enterTypes: Array<EnterKeyType> = [EnterKeyType.Go, EnterKeyType.Search, EnterKeyType.Send, EnterKeyType.Done, EnterKeyType.Next, EnterKeyType.PREVIOUS, EnterKeyType.NEW_LINE]
1004  @State index: number = 0
1005  build() {
1006    Column({ space: 20 }) {
1007      Search({ placeholder: 'Enter text', value: this.Text })
1008        .width(380)
1009        .enterKeyType(this.enterTypes[this.index])
1010        .onChange((value: string) => {
1011          this.Text = value
1012        })
1013        .onSubmit((value: String) => {
1014          console.log("trigger search onsubmit" + value);
1015        })
1016
1017      Button('Change EnterKeyType').onClick(() => {
1018        this.index = (this.index + 1) % this.enterTypes.length;
1019      })
1020    }.width('100%')
1021  }
1022}
1023```
1024
1025![searchEnterKeyType](figures/searchEnterKey.gif)
1026
1027### Example 5
1028
1029This example shows how to use the **lineHeight**, **letterSpacing**, and **decoration** attributes.
1030
1031```ts
1032// xxx.ets
1033@Entry
1034@Component
1035struct SearchExample {
1036  build() {
1037    Row() {
1038      Column() {
1039        Text('lineHeight').fontSize(9).fontColor(0xCCCCCC)
1040        Search({value: 'lineHeight unset'})
1041          .border({ width: 1 }).padding(10)
1042        Search({value: 'lineHeight 15'})
1043          .border({ width: 1 }).padding(10).lineHeight(15)
1044        Search({value: 'lineHeight 30'})
1045          .border({ width: 1 }).padding(10).lineHeight(30)
1046
1047        Text('letterSpacing').fontSize(9).fontColor(0xCCCCCC)
1048        Search({value: 'letterSpacing 0'})
1049          .border({ width: 1 }).padding(5).letterSpacing(0)
1050        Search({value: 'letterSpacing 3'})
1051          .border({ width: 1 }).padding(5).letterSpacing(3)
1052        Search({value: 'letterSpacing -1'})
1053          .border({ width: 1 }).padding(5).letterSpacing(-1)
1054
1055        Text('decoration').fontSize(9).fontColor(0xCCCCCC)
1056        Search({value: 'LineThrough, Red'})
1057          .border({ width: 1 }).padding(5)
1058          .decoration({type: TextDecorationType.LineThrough, color: Color.Red})
1059        Search({value: 'Overline, Red, DOTTED'})
1060          .border({ width: 1 }).padding(5)
1061          .decoration({type: TextDecorationType.Overline, color: Color.Red, style: TextDecorationStyle.DOTTED})
1062        Search({value: 'Underline, Red, WAVY'})
1063          .border({ width: 1 }).padding(5)
1064          .decoration({type: TextDecorationType.Underline, color: Color.Red, style: TextDecorationStyle.WAVY})
1065      }.height('90%')
1066    }
1067    .width('90%')
1068    .margin(10)
1069  }
1070}
1071
1072```
1073
1074![SearchDecoration](figures/search_decoration.png)
1075
1076### Example 6
1077This example shows how to set the **fontFeature** attribute, with a comparison between the ss01-enabled and ss01-disabled effects.
1078
1079```ts
1080@Entry
1081@Component
1082struct search {
1083  @State text1: string = 'This is ss01 on : 0123456789'
1084  @State text2: string = 'This is ss01 off: 0123456789'
1085
1086  build() {
1087    Column(){
1088      Search({value: this.text1})
1089        .margin({top:200})
1090        .fontFeature("\"ss01\" on")
1091      Search({value: this.text2})
1092        .margin({top:10})
1093        .fontFeature("\"ss01\" off")
1094    }
1095    .width("90%")
1096    .margin("5%")
1097  }
1098}
1099```
1100![fontFeature](figures/searchFontFeature.png)
1101
1102### Example 7
1103
1104This example shows how to support custom keyboard avoidance.
1105
1106```ts
1107@Entry
1108@Component
1109struct SearchExample {
1110  controller: SearchController = new SearchController()
1111  @State inputValue: string = ""
1112  @State height1:string|number = '80%'
1113  @State supportAvoidance:boolean = true;
1114  // Create a custom keyboard component.
1115  @Builder CustomKeyboardBuilder() {
1116    Column() {
1117      Row(){
1118        Button('x').onClick(() => {
1119          // Disable the custom keyboard.
1120          this.controller.stopEditing()
1121        }).margin(10)
1122      }
1123      Grid() {
1124        ForEach([1, 2, 3, 4, 5, 6, 7, 8, 9, '*', 0, '#'], (item: number | string) => {
1125          GridItem() {
1126            Button(item + "")
1127              .width(110).onClick(() => {
1128              this.inputValue += item
1129            })
1130          }
1131        })
1132      }.maxCount(3).columnsGap(10).rowsGap(10).padding(5)
1133    }
1134    .backgroundColor(Color.Gray)
1135  }
1136
1137  build() {
1138    Column() {
1139      Row(){
1140        Button("20%")
1141          .fontSize(24)
1142          .onClick(()=>{
1143            this.height1 = "20%"
1144          })
1145        Button("80%")
1146          .fontSize(24)
1147          .margin({left:20})
1148          .onClick(()=>{
1149            this.height1 = "80%"
1150          })
1151      }
1152      .justifyContent(FlexAlign.Center)
1153      .alignItems(VerticalAlign.Bottom)
1154      .height(this.height1)
1155      .width("100%")
1156      .padding({bottom:50})
1157      Search({ controller: this.controller, value: this.inputValue})
1158        // Bind the custom keyboard.
1159        .customKeyboard(this.CustomKeyboardBuilder(),{ supportAvoidance: this.supportAvoidance }).margin(10).border({ width: 1 })
1160    }
1161  }
1162}
1163```
1164
1165![CustomSearchKeyType](figures/searchCustomKeyboard.gif)
1166
1167### Example 8
1168
1169This example shows how to set **minFontSize** and **maxFontSize**.
1170
1171```ts
1172// xxx.ets
1173@Entry
1174@Component
1175struct SearchExample {
1176  build() {
1177    Row() {
1178      Column() {
1179        Text('adaptive font').fontSize(9).fontColor(0xCCCCCC)
1180
1181        Search({value: 'This is the text without the adaptive font'})
1182          .width('80%').height(90).borderWidth(1)
1183        Search({value: 'This is the text without the adaptive font'})
1184          .width('80%').height(90).borderWidth(1)
1185          .minFontSize(4)
1186          .maxFontSize(40)
1187      }.height('90%')
1188    }
1189    .width('90%')
1190    .margin(10)
1191  }
1192}
1193```
1194
1195![searchAdaptFont](figures/search_adapt_font.png)
1196
1197### Example 9
1198
1199This example shows how to use the insert and delete callbacks.
1200
1201```ts
1202// xxx.ets
1203@Entry
1204@Component
1205struct SearchExample {
1206  @State insertValue: string = ""
1207  @State deleteValue: string = ""
1208  @State insertOffset: number = 0
1209  @State deleteOffset: number = 0
1210  @State deleteDirection: number = 0
1211
1212  build() {
1213    Row() {
1214      Column() {
1215        Search({ value: "Insert callbacks are supported" })
1216          .height(60)
1217          .onWillInsert((info: InsertValue) => {
1218            this.insertValue = info.insertValue
1219            return true;
1220          })
1221          .onDidInsert((info: InsertValue) => {
1222            this.insertOffset = info.insertOffset
1223          })
1224
1225        Text("insertValue:" + this.insertValue + "  insertOffset:" + this.insertOffset).height(30)
1226
1227        Search({ value: "Delete callbacks are supported" })
1228          .height(60)
1229          .onWillDelete((info: DeleteValue) => {
1230            this.deleteValue = info.deleteValue
1231            info.direction
1232            return true;
1233          })
1234          .onDidDelete((info: DeleteValue) => {
1235            this.deleteOffset = info.deleteOffset
1236            this.deleteDirection = info.direction
1237          })
1238
1239        Text("deleteValue:" + this.deleteValue + "  deleteOffset:" + this.deleteOffset).height(30)
1240        Text("deleteDirection:" + (this.deleteDirection == 0 ? "BACKWARD" : "FORWARD")).height(30)
1241
1242      }.width('100%')
1243    }
1244    .height('100%')
1245  }
1246}
1247```
1248
1249![SearchInsertAndDelete](figures/SearchInsertAndDelete.PNG)
1250
1251### Example 10
1252
1253This example shows how to set **editMenuOptions**.
1254
1255```ts
1256// xxx.ets
1257@Entry
1258@Component
1259struct Index {
1260  @State text: string = 'Search editMenuOptions'
1261
1262  onCreateMenu(menuItems: Array<TextMenuItem>) {
1263    menuItems.forEach((value, index) => {
1264      value.icon = $r('app.media.startIcon')
1265      if (value.id.equals(TextMenuItemId.COPY)) {
1266        value.content = "Copy_custom"
1267      }
1268      if (value.id.equals(TextMenuItemId.SELECT_ALL)) {
1269        value.content = "Select all_custom"
1270      }
1271    })
1272    let item1: TextMenuItem = {
1273      content: 'custom1',
1274      icon: $r('app.media.startIcon'),
1275      id: TextMenuItemId.of('custom1'),
1276    }
1277    let item2: TextMenuItem = {
1278      content: 'custom2',
1279      id: TextMenuItemId.of('custom2'),
1280      icon: $r('app.media.startIcon'),
1281    }
1282    menuItems.push(item1)
1283    menuItems.unshift(item2)
1284    return menuItems
1285  }
1286
1287  build() {
1288    Column() {
1289      Search({ value: this.text })
1290        .width('95%')
1291        .editMenuOptions({
1292          onCreateMenu: this.onCreateMenu, onMenuItemClick: (menuItem: TextMenuItem, textRange: TextRange) => {
1293            if (menuItem.id.equals(TextMenuItemId.of("custom2"))) {
1294              console.log("Intercept id: custom2 start:" + textRange.start + "; end:" + textRange.end)
1295              return true;
1296            }
1297            if (menuItem.id.equals(TextMenuItemId.COPY)) {
1298              console.log("Intercept COPY start:" + textRange.start + "; end:" + textRange.end)
1299              return true;
1300            }
1301            if (menuItem.id.equals(TextMenuItemId.SELECT_ALL)) {
1302              console.log("Do not intercept SELECT_ALL start:" + textRange.start + "; end:" + textRange.end)
1303              return false;
1304            }
1305            return false;
1306          }
1307        })
1308        .margin({ top: 100 })
1309    }
1310    .width("90%")
1311    .margin("5%")
1312  }
1313}
1314```
1315
1316![searchEditMenuOptions](figures/searchEditMenuOptions.gif)
1317