UISearchBar

来自于：APICloud 官方立即使用

open close setText clearHistory

论坛示例

为帮助用户更好更快的使用模块，论坛维护了一个示例，示例中包含示例代码、知识点讲解、注意事项等，供您参考。

概述

UISearchBar 是一个独立的搜索页面，相当于打开一个 window 。模块预览图如下： UISearchBar - 图1

本模块可实现的主要功能有：

1，设置输入框占位提示文字

可通过 open 接口的 placeholder 参数配置

2，设置搜索历史记录条数

可通过 open 接口的 historyCount 参数配置

3，设置历史记录存储位置

可通过 open 接口的 dataBase 参数配置

4，设置搜索页面样式

可通过 open 接口的 styles 参数配置

5，清空历史记录

可通过 clearHistory 接口实现

本模块源码已开源，地址为：https://github.com/apicloudcom/UISearchBar

模块接口

open

打开搜索页面

open({params}, callback(ret))

params

placeholder：

  • 类型：字符串
  • 描述：（可选项）搜索框的占位提示文本
  • 默认值：’请输入搜索关键字’

historyCount：

  • 类型：数字
  • 描述：（可选项）历史记录条数
  • 默认值：10

dataBase：

  • 类型：字符串
  • 描述：（可选项）历史记录存储库名，以区分同一个 app 多个不同页面的数据
  • 默认值：UISearchBarData

showRecordBtn：

  • 类型：布尔
  • 描述：（可选项）是否显示录音按钮
  • 默认值：true

texts：

  • 类型：JSON 对象
  • 描述：（可选项）模块各部分的文本
  • 内部字段：
  1. {
  2.     cancelText: '取消',           //（可选项）字符串类型；取消按钮的文本；默认：'取消'  
  3.     clearText: '清除搜索记录'     //（可选项）字符串类型；清除按钮的文本；默认：'清除搜索记录'
  4. }

styles：

  • 类型：JSON 对象
  • 描述：（可选项）模块各部分的样式
  • 内部字段：
  1. {
  2.     navBar: {                               //（可选项）JSON对象；搜索框所在的导航条样式
  3.         bgColor: '#FFFFFF',                 //（可选项）字符串类型；搜索框所在的导航条背景色，支持 rgb，rgba，#；默认：'#FFFFFF'
  4.         borderColor: '#ccc'                 //（可选项）字符串类型；搜索框所在的导航条边框颜色，支持 rgb，rgba，#；默认：'#CCCCCC'
  5.     },
  6.     searchBox: {                            //（可选项）JSON对象；搜索框样式
  7.         marginL:,                           //（可选项）数字类型；输入框距离屏幕左边的间距；默认：5.0
  8.         width: ,                            //（可选项）数字类型；输入框的宽；默认：当前屏幕宽度的75%-marginL
  9.         bgImg: '',                          //（可选项）字符串类型；搜索框的背景图片，要求本地路径（fs://、widget://）；默认：自带背景图片
  10.         color: '#000',                      //（可选项）字符串类型；搜索框输入文本的颜色，支持 rgb，rgba，#；默认：'#000000'
  11.         size: 16,                           //（可选项）数字类型；搜索框输入文本的字体大小；默认：16
  12.         height: 44                          //（可选项）数字类型；搜索框的高度；默认：44
  13.     },
  14.     cancel: {                               //（可选项）JSON对象；取消按钮的样式
  15.         width: ,                            //（可选项）数字类型；取消按钮的宽；默认：当前屏幕宽度的20%
  16.         marginR:,                           //（可选项）数字类型；输入框距离屏幕左边的间距；默认：当前屏幕宽度的2.5%
  17.         bg: 'rgba(0,0,0,0)',                //（可选项）字符串类型；取消按钮的背景，支持 rgb，rgba，#，图片路径（本地路径，支持fs://、widget://）；默认：'rgba(0,0,0,0)'
  18.         color: '#D2691E',                   //（可选项）字符串类型；取消按钮的字体颜色，支持 rgb，rgba，#；默认：'#D2691E'
  19.         size: 16                            //（可选项）数字类型；取消按钮的字体大小；默认：16
  20.     },
  21.     list: {                                 //（可选项）JSON对象；历史记录列表的样式
  22.         color: '#696969',                   //（可选项）字符串类型；历史记录列表的文本颜色，支持 rgb，rgba，#；默认：'#696969'
  23.         bgColor: '#FFFFFF',                 //（可选项）字符串类型；历史记录列表的背景色，支持 rgb，rgba，#；默认：'#FFFFFF'
  24.         activeBgColor: '#eee',              //（可选项）字符串类型；历史记录列表按下时的背景色，支持 rgb，rgba，#；默认：'#EEEEEE'
  25.         borderColor: '#eee',                //（可选项）字符串类型；历史记录列表的边框颜色，支持 rgb，rgba，#；默认：'#EEEEEE'
  26.         size: 16                            //（可选项）数字类型；历史记录列表的字体大小；默认：16
  27.     },
  28.     clear: {                                //（可选项）JSON对象；清除历史记录按钮的样式
  29.         color: '#000000',                   //（可选项）字符串类型；清除按钮的字体颜色，支持 rgb，rgba，#；默认：'#000000'
  30.         bgColor: '#fff',                    //（可选项）字符串类型；清除按钮的背景色，支持 rgb，rgba，#；默认：'#FFFFFF'
  31.         activeBgColor: '#eee',              //（可选项）字符串类型；清除按钮按下时的背景色，支持 rgb，rgba，#；默认：'#EEEEEE'
  32.         borderColor: '#ccc',                //（可选项）字符串类型；清除按钮的下边框颜色，支持 rgb，rgba，#；默认：'#CCCCCC'
  33.         size: 16                            //（可选项）数字类型；清除按钮的字体大小；默认：16
  34.     }
  35. }

callback(ret)

ret：

  • 类型：JSON 对象
  • 内部字段：
  1. {
  2.     eventType: 'record',        //字符串类型；交互事件类型
  3.                                 //取值范围：
  4.                                 //record（用户点击录音按钮）
  5.                                 //search（用户点击搜索按钮）
  6.                                 //history（用户点击历史记录）
  7.     text: ''                    //字符串类型；返回用户要搜索的文本
  8. }

示例代码

  1. var UISearchBar = api.require('UISearchBar');
  2. UISearchBar.open({
  3.     placeholder: '请输入搜索关键字',
  4.     historyCount: 10,
  5.     showRecordBtn: true,
  6.     texts: {
  7.         cancelText: '取消',
  8.         clearText: '清除搜索记录'
  9.     },
  10.     styles: {
  11.         navBar: {
  12.             bgColor: '#FFFFFF',
  13.             borderColor: '#ccc'
  14.         },
  15.         searchBox: {
  16.             bgImg: '',
  17.             color: '#000',
  18.             height: 44
  19.         },
  20.         cancel: {
  21.             bg: 'rgba(0,0,0,0)',
  22.             color: '#D2691E',
  23.             size: 16
  24.         },
  25.         list: {
  26.             color: '#696969',
  27.             bgColor: '#FFFFFF',
  28.             borderColor: '#eee',
  29.             size: 16
  30.         },
  31.         clear: {
  32.             color: '#000000',
  33.             borderColor: '#ccc',
  34.             size: 16
  35.         }
  36.     }
  37. }, function(ret, err) {
  38.     if (ret) {
  39.         alert(JSON.stringify(ret));
  40.     } else {
  41.         alert(JSON.stringify(err));
  42.     }
  43. });

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

close

关闭搜索页面

close()

示例代码

  1. var UISearchBar = api.require('UISearchBar');
  2. UISearchBar.close();

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

setText

设置搜索框的文字

setText({params})

params

text：

  • 类型：字符串
  • 描述：（可选项）搜索框内的文字，若不传或传空则清空搜索框内容

示例代码

  1. var UISearchBar = api.require('UISearchBar');
  2. UISearchBar.setText({
  3.     text: '设置语音识别的文本'
  4. });

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

clearHistory

清空当前搜索历史记录

clearHistory()

示例代码

  1. var UISearchBar = api.require('UISearchBar');
  2. UISearchBar.clearHistory();

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本