鸿蒙应用开发之搜索框

在日常使用软件过程中，搜索功能是必不可少的但在鸿蒙应用开发中搜索功能是如何实现的呢？其中官方文档中为我们提供了search组件即搜索框组件。接下来让我们通过简单的例子来熟悉一下search组件吧。

属性

首先我们将搜索界面搭建好。以下是官方为我们提供搜索组件的属性列表，除列表中的功能搜索组件还支持通用属性。

名称	类型	默认值	必填	描述
icon	string	-	否	搜索图标，默认使用系统搜索图标，图标格式为svg，jpg和png。
hint	string	-	否	搜索提示文字。
value	string	-	否	搜索框搜索文本值。
searchbutton5+	string	-	否	搜索框末尾搜索按钮文本值。
menuoptions5+	Array<MenuOption>	-	否	设置文本选择弹框点击更多按钮之后显示的菜单项。

搜索界面

在js工程中创建searchView界面。

 searchView.hml

<div class="container">
    <search hint="请输入搜索内容" @submit="submit" searchbutton="搜索"></search>
</div>

 界面效果

功能实现

在官方文档中我们可以看到search组件支持以下事件。

名称	参数	描述
change	{ text:newText }	输入内容发生变化时触发。
submit	{ text:submitText }	点击搜索图标、搜索按钮或者按下软键盘搜索按钮时触发。
translate5+	{ value: selectedText }	设置此事件后，进行文本选择操作后文本选择弹窗会出现翻译按钮，点击翻译按钮之后，触发该回调，返回选中的文本内容。
share5+	{ value: selectedText }	设置此事件后，进行文本选择操作后文本选择弹窗会出现分享按钮，点击分享按钮之后，触发该回调，返回选中的文本内容。
search5+	{ value: selectedText }	设置此事件后，进行文本选择操作后文本选择弹窗会出现搜索按钮，点击搜索按钮之后，触发该回调，返回选中的文本内容。
optionselect5+	{ index:optionIndex, value: selectedText }	文本选择弹窗中设置menuoptions属性后，用户在文本选择操作后，点击菜单项后触发该回调，返回点击的菜单项序号和选中的文本内容。

接下来我们以submit事件来实现获取搜索框输入文本功能。在hml代码中我们已经将search绑定submit事件。

 我们只需要在js代码中将submint所绑定的submint函数实现即可。

searchView.js

import prompt from '@system.prompt';
export default {
    data: {
        title: 'World'
    },
    submit(e){
        prompt.showToast({
            message: e.text
        });
    },
}

实现效果