Search

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

NOTE

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

Child Components

Not supported

APIs

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

Parameters

Attributes

In addition to the universal attributes, the following attributes are supported.

IconOptions¹⁰⁺

CaretStyle¹⁰⁺

SearchButtonOptions¹⁰⁺

CancelButtonStyle¹⁰⁺

Events

In addition to the universal events, the following events are supported.

SearchController

Implements the controller of the <Search> component. Currently, the controller can be used to control the caret position.

Objects to Import

controller: SearchController = new SearchController()

caretPosition

caretPosition(value: number): void

Sets the position of the caret.

Parameters

stopEditing¹⁰⁺

stopEditing(): void

Exits the editing state.

getTextContentRect¹⁰⁺

getTextContentRect(): RectResult

Obtains the position of the edited text area relative to the component and its size. The unit of the return value is pixel.

Return value

NOTE

• The returned position information is the offset of the first character relative to the search icon in the <Search> component.
• If no text is entered, the return value contains the position information, but the size is 0.

RectResult¹⁰⁺

Describes the position and size.

getTextContentLineCount¹⁰⁺

getTextContentLineCount(): number

Obtains the number of lines of the edited text.

Return value

Example

Example 1

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

  build() {
    Column() {
      Text('onSubmit:' + this.submitValue).fontSize(18).margin(15)
      Text('onChange:' + this.changeValue).fontSize(18).margin(15)
      Search({ value: this.changeValue, placeholder: 'Type to search...', controller: this.controller })
        .searchButton('SEARCH')
        .width('95%')
        .height(40)
        .backgroundColor('#F5F5F5')
        .placeholderColor(Color.Grey)
        .placeholderFont({ size: 14, weight: 400 })
        .textFont({ size: 14, weight: 400 })
        .onSubmit((value: string) => {
          this.submitValue = value
        })
        .onChange((value: string) => {
          this.changeValue = value
        })
        .margin(20)
      Button('Set caretPosition 1')
        .onClick(() => {
          // Move the caret to after the first entered character.
          this.controller.caretPosition(1)
        })
    }.width('100%')
  }
}

Example 2

// xxx.ets
@Entry
@Component
struct SearchButtoonExample {
  @State submitValue: string = ''

  build() {
    Column() {
      Text('onSubmit:' + this.submitValue).fontSize(18).margin(15)
      Search({ placeholder: 'Type to search...' })
        .searchButton('SEARCH')
        .searchIcon({
          src: $r('app.media.search')
        })
        .cancelButton({
          style: CancelButtonStyle.CONSTANT,
          icon: {
            src: $r('app.media.cancel')
          }
        })
        .width('90%')
        .height(40)
        .backgroundColor('#F5F5F5')
        .placeholderColor(Color.Grey)
        .placeholderFont({ size: 14, weight: 400 })
        .textFont({ size: 14, weight: 400 })
        .onSubmit((value: string) => {
          this.submitValue = value
        })
        .margin(20)
    }.width('100%')
  }
}

Example 3

”`ts // xxx.ets @Entry @Component struct SearchExample { controller: SearchController = new SearchController() @State inputValue: string = “”

// Create a custom keyboard component. @Builder CustomKeyboardBuilder() { Column() { Button(‘x’).onClick(() => { // Disable the custom keyboard. this.controller.stopEditing() }) Grid() { ForEach([1, 2, 3, 4, 5, 6, 7, 8, 9, ‘*’, 0, ‘#’], (item: number|string) => { GridItem() { Button(item + “”) .width(110).onClick(() => { this.inputValue += item }) } }) }.maxCount(3).columnsGap(10).rowsGap(10).padding(5) }.backgroundColor(Color.Gray) }

build() { Column() { Search({ controller: this.controller, value: this.inputValue}) // Bind the custom keyboard. .customKeyboard(this.CustomKeyboardBuilder()).margin(10).border({ width: 1 }) } } } “”

你可能感兴趣的鸿蒙文章

harmony 鸿蒙ArkTS-based Declarative Development Paradigm

harmony 鸿蒙@ohos.multimedia.avCastPicker (AVCastPicker)

harmony 鸿蒙Property Animation

harmony 鸿蒙Enums

harmony 鸿蒙Blank

harmony 鸿蒙Button

harmony 鸿蒙CalendarPicker

harmony 鸿蒙Checkbox

harmony 鸿蒙CheckboxGroup

harmony 鸿蒙DataPanel