DEV Community

flfljh
flfljh

Posted on

Simplified Usage of Search Component

1. Basic Usage

  • Import and Creation: In an ETS file, first import the Search component via import { Search } from '@ohos.arkui.advanced.Search'. Then create a Search instance in the component's build method:

    ```typescript
Search({ value: this.searchText, placeholder: 'Search...' })
 .width('90%')
 .height(40)
 .onSubmit((value: string) => {
// Handle search submission logic
  })
 .onChange((value: string) => {
// Handle input change logic
  });
```

This sets the initial text (value), placeholder text, dimensions, and event listeners for onSubmit (search submission) and onChange (input changes).

2. Property Configuration

  • Search Button Style: Customize the search button using searchButton:

    .searchButton('SEARCH', { fontSize: '16fp', fontColor: '#ff3f97e9' })

  • Placeholder Styling:

    placeholderColor sets placeholder text color

    placeholderFont sets placeholder font style:

    .placeholderColor(Color.Grey)
.placeholderFont({ size: 14, weight: 400 })

  • Text Styling: textFont customizes input text appearance

  • Alignment: textAlign (API 9+) sets text alignment (TextAlign.Start default)

  • Icon Styling:

    searchIcon (API 10+) customizes search icon

    cancelButton customizes clear button

  • Text Copying: copyOption (API 9+) enables text copying (default: CopyOptions.LocalDevice)

  • Additional Properties:

    fontColor - Input text color

    caretStyle - Cursor appearance

    enableKeyboardOnFocus - Auto-open keyboard on focus

3. Event Handling

  • Search Submission: onSubmit triggers when: • Search icon clicked • Search button pressed • Keyboard search key pressed
  • Input Changes: onChange triggers during text input
  • Text Operations: onCopy - Copy operations onCut - Cut operations onPaste - Paste operations onTextSelectionChange - Text selection changes onContentScroll - Content scrolling

4. Controller Usage

  • Controller Creation: controller: SearchController = new SearchController()
  • Cursor Control: this.controller.caretPosition(1) positions cursor after first character
  • Exit Edit Mode: this.controller.stopEditing() closes keyboard (custom keyboard scenarios)

5. Custom Keyboards

  1. Create custom keyboard component:

    @Builder CustomKeyboardBuilder() {
  Column() {
// Custom keyboard layout and logic
  }
}

  2. Bind to Search component:

    Search({ controller: this.controller, value: this.inputValue})
 .customKeyboard(this.CustomKeyboardBuilder())

6. Input Types & Restrictions

  • Input Types (API 11+): SearchType.Normal - Default text input SearchType.NUMBER - Numeric only SearchType.PHONE_NUMBER - Phone number format SearchType.EMAIL - Email format
  • Length Limit: maxLength restricts character count

7. Advanced Features

  • Text Styling (API 12+): decoration - Text underline styling textIndent - First-line indentation letterSpacing - Character spacing lineHeight - Line height selectedBackgroundColor - Selection highlight color
  • Input Preview: enablePreviewText enables/disables input preview (default enabled)
  • Input Filtering: inputFilter uses regex to restrict allowed characters

By combining these features, developers can create powerful search components tailored to specific application requirements. Consider API version support when implementing features, and leverage new capabilities to optimize search functionality.

Top comments (0)