Search

The <Search> component provides an input area for users to search.

NOTE

This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.

Required Permissions

None

Child Components

Not supported

APIs

Search(options?: { value?: string; placeholder?: string; icon?: string; controller?: SearchController })

Parameters

Name Type Mandatory Description
value string No Text input in the search text box.
placeholder string No Text displayed when there is no input.
icon string No Path to the search icon. By default, the system search icon is used. The supported icon formats are .svg, .jpg, and .png.
controller SearchController No Controller.

Attributes

Name Type Description
searchButton string Text on the search button located next to the search text box. By default, there is no search button.
placeholderColor ResourceColor Placeholder text color.
placeholderFont Font Placeholder text style.
textFont Font Text font for the search text box.

Events

Name Description
onSubmit(callback: (value: string) => void) Triggered when users click the search icon or the search button, or touch the search button on a soft keyboard.
- value: current text input.
onChange(callback: (value: string) => void) Triggered when the input in the text box changes.
- value: current text input.
onCopy(callback: (value: string) => void) Triggered when data is copied to the pasteboard.
- value: text copied.
onCut(callback: (value: string) => void) Triggered when data is cut from the pasteboard.
- value: text cut.
onPaste(callback: (value: string) => void) Triggered when data is pasted from the pasteboard.
- value: text pasted.

SearchController

Defines the controller of the <Search> component.

Objects to Import

controller: SearchController = new SearchController()

caretPosition

caretPosition(value: number): void

Sets the position of the caret.

Parameters

Name Type Mandatory Description
value number Yes Length from the start of the character string to the position where the caret is located.

Example

// xxx.ets
@Entry
@Component
struct SearchExample {
  @State changeValue: string = ''
  @State submitValue: string = ''
  controller: SearchController = new SearchController()

  build() {
    Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
      Text(this.submitValue)
      Text(this.changeValue)
      Search({value: this.changeValue, placeholder: 'Type to search', controller: this.controller})
        .searchButton('Search')
        .width(400)
        .height(35)
        .backgroundColor(Color.White)
        .placeholderColor(Color.Grey)
        .placeholderFont({ size: 26, weight: 10, family: 'serif', style: FontStyle.Normal })
        .onSubmit((value: string) => {
          this.submitValue = value
        })
        .onChange((value: string) => {
          this.changeValue = value
        })
        .margin({ top: 30, left:10, right:10 })
    }
  }
}

search