UISearchBar

论坛示例

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

概述

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/10/21