UISearchBar

open close setText clearHistory

论坛示例

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

概述

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

本插件可实现的主要功能有：

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

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

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

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

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

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

4，设置搜索页面样式

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

5，清空历史记录

可通过 clearHistory 接口实现

***本插件源码已开源，地址

插件接口

open

打开搜索页面

open({params}, callback(ret))

params

placeholder：

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

historyCount：

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

dataBase：

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

showRecordBtn：

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

texts：

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

styles：

  • 类型：JSON 对象
  • 描述：（可选项）插件各部分的样式
  • 内部字段：
{
    navBar: {                               //（可选项）JSON对象；搜索框所在的导航条样式
        bgColor: '#FFFFFF',                 //（可选项）字符串类型；搜索框所在的导航条背景色，支持 rgb，rgba，#；默认：'#FFFFFF'
        borderColor: '#ccc'                 //（可选项）字符串类型；搜索框所在的导航条边框颜色，支持 rgb，rgba，#；默认：'#CCCCCC'
    },
    searchBox: {                            //（可选项）JSON对象；搜索框样式
        marginL:,                           //（可选项）数字类型；输入框距离屏幕左边的间距；默认：5.0
        width: ,                            //（可选项）数字类型；输入框的宽；默认：当前屏幕宽度的75%-marginL
        bgImg: '',                          //（可选项）字符串类型；搜索框的背景图片，要求本地路径（fs://、widget://）；默认：自带背景图片
        color: '#000',                      //（可选项）字符串类型；搜索框输入文本的颜色，支持 rgb，rgba，#；默认：'#000000'
        size: 16,                           //（可选项）数字类型；搜索框输入文本的字体大小；默认：16
        height: 44,                         //（可选项）数字类型；搜索框的高度；默认：44
        textInCenter:true                   // (可选项) 布尔类型；输入文本是否居中显示；默认：false
    },
    cancel: {                               //（可选项）JSON对象；取消按钮的样式
        width: ,                            //（可选项）数字类型；取消按钮的宽；默认：当前屏幕宽度的20%
        marginR:,                           //（可选项）数字类型；输入框距离屏幕左边的间距；默认：当前屏幕宽度的2.5%
        bg: 'rgba(0,0,0,0)',                //（可选项）字符串类型；取消按钮的背景，支持 rgb，rgba，#，图片路径（本地路径，支持fs://、widget://）；默认：'rgba(0,0,0,0)'
        color: '#D2691E',                   //（可选项）字符串类型；取消按钮的字体颜色，支持 rgb，rgba，#；默认：'#D2691E'
        size: 16                            //（可选项）数字类型；取消按钮的字体大小；默认：16
    },
    list: {                                 //（可选项）JSON对象；历史记录列表的样式
        color: '#696969',                   //（可选项）字符串类型；历史记录列表的文本颜色，支持 rgb，rgba，#；默认：'#696969'
        bgColor: '#FFFFFF',                 //（可选项）字符串类型；历史记录列表的背景色，支持 rgb，rgba，#；默认：'#FFFFFF'
        activeBgColor: '#eee',              //（可选项）字符串类型；历史记录列表按下时的背景色，支持 rgb，rgba，#；默认：'#EEEEEE'
        borderColor: '#eee',                //（可选项）字符串类型；历史记录列表的边框颜色，支持 rgb，rgba，#；默认：'#EEEEEE'
        size: 16                            //（可选项）数字类型；历史记录列表的字体大小；默认：16
    },
    clear: {                                //（可选项）JSON对象；清除历史记录按钮的样式
        color: '#000000',                   //（可选项）字符串类型；清除按钮的字体颜色，支持 rgb，rgba，#；默认：'#000000'
        bgColor: '#fff',                    //（可选项）字符串类型；清除按钮的背景色，支持 rgb，rgba，#；默认：'#FFFFFF'
        activeBgColor: '#eee',              //（可选项）字符串类型；清除按钮按下时的背景色，支持 rgb，rgba，#；默认：'#EEEEEE'
        borderColor: '#ccc',                //（可选项）字符串类型；清除按钮的下边框颜色，支持 rgb，rgba，#；默认：'#CCCCCC'
        size: 16                            //（可选项）数字类型；清除按钮的字体大小；默认：16
    }
}

callback(ret)

ret：

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

示例代码

var UISearchBar = api.require('UISearchBar');
UISearchBar.open({
    placeholder: '请输入搜索关键字',
    historyCount: 10,
    showRecordBtn: true,
    texts: {
        cancelText: '取消',
        clearText: '清除搜索记录'
    },
    styles: {
        navBar: {
            bgColor: '#FFFFFF',
            borderColor: '#ccc'
        },
        searchBox: {
            bgImg: '',
            color: '#000',
            height: 44
        },
        cancel: {
            bg: 'rgba(0,0,0,0)',
            color: '#D2691E',
            size: 16
        },
        list: {
            color: '#696969',
            bgColor: '#FFFFFF',
            borderColor: '#eee',
            size: 16
        },
        clear: {
            color: '#000000',
            borderColor: '#ccc',
            size: 16
        }
    }
}, function(ret, err) {
    if (ret) {
        api.alert({msg: JSON.stringify(ret)});
    } else {
        api.alert({msg: JSON.stringify(err)});
    }
});

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

close

关闭搜索页面

close()

示例代码

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

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

setText

设置搜索框的文字

setText({params})

params

text：

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

示例代码

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

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

clearHistory

清空当前搜索历史记录

clearHistory()

示例代码

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

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

是否仍需要帮助？ 请保持联络！
最后更新于 2024/07/22