（Harmony OS Next）搜索组件的简化使用
# 搜索组件的简化使用
### 1. 基本用法
- *导入与创建*：在 ETS 文件中，首先通过 `import { Search } from '@ohos.arkui.advanced.Search'` 导入搜索组件。然后在组件的 `build` 方法中创建一个 Search 实例：
```typescript
Search({ value: this.searchText, placeholder: '搜索...' })
.width('90%')
.height(40)
.onSubmit((value: string) => {
// 处理搜索提交逻辑
})
.onChange((value: string) => {
// 处理输入变化逻辑
});
```
这段代码设置了初始文本（`value`）、占位符文本、尺寸以及 `onSubmit`（搜索提交）和 `onChange`（输入变化）的事件监听器。
### 2. 属性配置
- *搜索按钮样式*：使用 `searchButton` 自定义搜索按钮：
```typescript
.searchButton('搜索', { fontSize: '16fp', fontColor: '#ff3f97e9' })
```
- *占位符样式*：
`placeholderColor` 设置占位符文本颜色
`placeholderFont` 设置占位符字体样式：
```typescript
.placeholderColor(Color.Grey)
.placeholderFont({ size: 14, weight: 400 })
```
- *文本样式*：`textFont` 自定义输入文本外观
- *对齐方式*：`textAlign`（API 9+）设置文本对齐方式（默认值为 `TextAlign.Start`）
- *图标样式*：
`searchIcon`（API 10+）自定义搜索图标
`cancelButton` 自定义清除按钮
- *文本复制*：`copyOption`（API 9+）启用文本复制（默认值：`CopyOptions.LocalDevice`）
- *其他属性*：
`fontColor` - 输入文本颜色
`caretStyle` - 光标外观
`enableKeyboardOnFocus` - 聚焦时自动打开键盘
### 3. 事件处理
- *搜索提交*：`onSubmit` 在以下情况下触发：
• 点击搜索图标
• 按下搜索按钮
• 按下键盘搜索键
- *输入变化*：`onChange` 在文本输入过程中触发
- *文本操作*：
`onCopy` - 复制操作
`onCut` - 剪切操作
`onPaste` - 粘贴操作
`onTextSelectionChange` - 文本选择变化
`onContentScroll` - 内容滚动
### 4. 控制器使用
- *控制器创建*：`controller: SearchController = new SearchController()`
- *光标控制*：`this.controller.caretPosition(1)` 将光标定位在第一个字符后
- *退出编辑模式*：`this.controller.stopEditing()` 关闭键盘（自定义键盘场景）
### 5. 自定义键盘
1. 创建自定义键盘组件：
```typescript
@Builder CustomKeyboardBuilder() {
Column() {
// 自定义键盘布局和逻辑
}
}
```
2. 绑定到搜索组件：
```typescript
Search({ controller: this.controller, value: this.inputValue })
.customKeyboard(this.CustomKeyboardBuilder())
```
### 6. 输入类型与限制
- *输入类型*（API 11+）：
`SearchType.Normal` - 默认文本输入
`SearchType.NUMBER` - 仅数字
`SearchType.PHONE_NUMBER` - 电话号码格式
`SearchType.EMAIL` - 电子邮件格式
- *长度限制*：`maxLength` 限制字符数量
### 7. 高级功能
- *文本样式*（API 12+）：
`decoration` - 文本下划线样式
`textIndent` - 首行缩进
`letterSpacing` - 字符间距
`lineHeight` - 行高
`selectedBackgroundColor` - 选择高亮颜色
- *输入预览*：`enablePreviewText` 启用/禁用输入预览（默认启用）
- *输入过滤*：`inputFilter` 使用正则表达式限制允许的字符
通过结合这些功能，开发者可以创建强大的搜索组件，以满足特定应用需求。在实现功能时，请考虑 API 版本支持，并利用新功能来优化搜索功能。
查看原文
# Simplified Usage of Search Component<p>### 1. Basic Usage<p>- *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:<p><pre><code> ```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
});
```
</code></pre>
This sets the initial text (`value`), placeholder text, dimensions, and event listeners for `onSubmit` (search submission) and `onChange` (input changes).<p>### 2. Property Configuration<p>- *Search Button Style*: Customize the search button using `searchButton`:<p>```typescript
.searchButton('SEARCH', { fontSize: '16fp', fontColor: '#ff3f97e9' })
```<p>- *Placeholder Styling*:
`placeholderColor` sets placeholder text color
`placeholderFont` sets placeholder font style:<p>```typescript
.placeholderColor(Color.Grey)
.placeholderFont({ size: 14, weight: 400 })
```<p>- *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<p>### 3. Event Handling<p>- *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<p>### 4. Controller Usage<p>- *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)<p>### 5. Custom Keyboards<p>1. Create custom keyboard component:
```typescript
@Builder CustomKeyboardBuilder() {
Column() {
// Custom keyboard layout and logic
}
}
```
2. Bind to Search component:
```typescript
Search({ controller: this.controller, value: this.inputValue})
.customKeyboard(this.CustomKeyboardBuilder())
```<p>### 6. Input Types & Restrictions<p>- *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<p>### 7. Advanced Features<p>- *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<p>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.