# wsSearchView

**Repository Path**: hihopeorg/wsSearchView

## Basic Information

- **Project Name**: wsSearchView
- **Description**: 搜索框组件
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-10-26
- **Last Updated**: 2022-05-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# wxSearchView

## 简介
wxSearchView是一个解决搜索框和输入法界面重叠的问题，将搜索组件作为一个独立的页面。

## 效果演示
![gif](preview.gif)

## 下载安装

```shell
npm install @ohos/wxSearchView --save
```
OpenHarmony npm环境配置等更多内容，请参考 [如何安装OpenHarmony npm包](https://gitee.com/openharmony-tpc/docs/blob/master/OpenHarmony_npm_usage.md) 。


## 使用说明：

第一步： 在hml文件中引入search组件；
```html
<element name="hw-search" src='wxSearchView/src/main/js/components/searchview/index.hml'></element>
```

第二步：在hml文件中写入：
```html

    <hw-search tip-keys="{{tipKeys}}" hot-keys="{{hotKeys}}"
                   @search-function="searchFunction" @go-back-function="goBackFunction"></hw-search>

```
第三步：在js文件写入需要的属性和方法
```javascript

        data: {
                title: "",
                rateVal:1,
                hotKeys:["杭州","嘉兴","海宁","桐乡","宁波","金华"],
                tipKeys:["湖北","湖南","北京","南京"]
            },
            onInit() {
                this.title = this.$t('strings.world');
            },
            rateChange(e){
                console.log(e.detail.value);
            },
            helloWorld(){
                this.rateVal = 5;
            },
            searchFunction(value){
                router.push({
                    uri: 'pages/jump/index',
                    params: {
                        'inputValue': value,
                    }
                });
        
            },
            goBackFunction(){
                //点击返回按钮回调
           

```

 - 注意:导入请求入口js文件时需要根据自己的项目路径;具体详细使用方法可查看项目的案例。


## 回调函数
为了方便调用，提高开发效率，组件实际上只是提供了两个回调接口，开发者也只需要提供这两个函数，介绍如下：
1.  搜索回调函数，下面是一个例子。当用户点击历史记录、搜索热点、搜索提示、搜索按钮时，都会回调开发者提供的函数接口，开发者拿到参数后可以跳到另一个页面展示查询结果。
```
  mySearchFunction: function (value) {
    // do your job here
  }
```
2. 返回回调函数，下面是一个例子。搜索框边上的按钮有两个角色，当输入为空的时候，是一个返回按钮；当输入不为空时，是一个搜索按钮。当点击返回按钮时，就会回调开发者提供的函数，这里可以跳回到指定页面。
```
  myGobackFunction: function () {
    // do your job here
  }
```

## 接口说明
|      方法名     |       参数     |  说明  |
| ------ | ------ | ------ |
| wxSearchInput       | e 为输入的内容         |   输入变化时的操作    |
| wxSearchKeyTap       | value 搜索的内容      |   点击提示或者关键字、历史记录时的操作    |
| wxSearchDeleteAll         |  无    |   删除所有的历史记录        |
| wxSearchConfirm        |     无  |   搜索函数   |

## 兼容性
支持 OpenHarmony API version 8 及以上版本。

## 目录结构
````
|---- wxSearchView  
|     |---- entry  # 示例代码文件夹
|     |---- wxSearchView  # weapp
            |---- components  # 组件代码目录
                  |---- searchView # 封装的搜索组件
|     |---- README.md  # 安装使用方法                    
````

## 贡献代码
使用过程中发现任何问题都可以提 [Issue](https://gitee.com/hihopeorg/wsSearchView/issues) 给我们，当然，我们也非常欢迎你给我们发 [PR](https://gitee.com/hihopeorg/wsSearchView/pulls) 。