Search

搜索框組件，適用于瀏覽器的搜索內容輸入框等應用場景。

說明：
開發前請熟悉鴻蒙開發指導文檔 ：[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]
該組件從API Version 8開始支持。后續版本如有新增內容，則采用上角標單獨標記該內容的起始版本。

子組件

無

接口

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

參數:

屬性

除支持[通用屬性]外，還支持以下屬性：

IconOptions10+對象說明

CaretStyle10+對象說明

SearchButtonOptions10+對象說明

CancelButtonStyle10+枚舉說明

事件

除支持[通用事件]外，還支持以下事件：

SearchController

Search組件的控制器，目前通過它可控制Search組件的光標位置。

導入對象

controller: SearchController = new SearchController()

caretPosition

caretPosition(value: number): void

設置輸入光標的位置。

參數:

stopEditing10+

stopEditing(): void

退出編輯態。

getTextContentRect10+

getTextContentRect(): [RectResult]

獲取已編輯文本內容區域相對組件的位置和大小，返回值單位為像素。

返回值：

說明：

• 返回的位置信息是相對Search組件中搜索圖標的偏移值。
• 不輸入文本時，返回值中有相對Search組件的位置信息，但大小為0。
• 返回值中的位置信息是第一個字符相對于可編輯組件的位置。

RectResult10+

位置和大小。

getTextContentLineCount10+

getTextContentLineCount(): number

獲取已編輯文本內容的行數。

返回值：

示例

示例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(() = > {
          // 設置光標位置到輸入的第一個字符后
          this.controller.caretPosition(1)
        })
    }.width('100%')
  }
}

示例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%')
  }
}

示例3

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

  // 自定義鍵盤組件
  @Builder CustomKeyboardBuilder() {
    Column() {
      Button('x').onClick(() = > {
        // 關閉自定義鍵盤
        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})
        // 綁定自定義鍵盤
        .customKeyboard(this.CustomKeyboardBuilder()).margin(10).border({ width: 1 })
    }
  }
}

審核編輯 黃宇