app中经常会有搜索的页面。

大概逻辑是，一般来说首页有一个搜索的图，点击之后跳转到一个搜索的页面，在这个页面做搜索。

正常代码逻辑

<body>

    <a class="button" tapmode="active" onclick="open_s()">打开搜索页面</a>

    <a class="button" tapmode="active" onclick="close_s()">关闭搜索页面</a>

    <a class="button" tapmode="active" onclick="setText_s()">设置搜索框的文字</a>

    <a class="button" tapmode="active" onclick="clearHistory_s()">清空当前搜索历史记录</a>

</body>

<script type="text/javascript" src="../script/api.js"></script>

<script type="text/javascript">

    apiready = function() {

        api.addEventListener({

            name : 'shake'

        }, function(ret, err) {

            console.log();

            close_s()

        });

    };

    function open_s() {

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

        UISearchBar.open({

            placeholder: '请输入搜索关键字',

            historyCount: ,

            showRecordBtn: true,

            texts: {

                cancelText: '取消',

                clearText: '清除搜索记录'

            },

            styles: {

                navBar: {

                    bgColor: '#FFFFFF',

                    borderColor: '#ccc'

                },

                searchBox: {

                    bgImg: '',

                    color: '#000',

                    height:

                },

                cancel: {

                    bg: 'rgba(0,0,0,0)',

                    color: '#D2691E',

                    size:

                },

                list: {

                    color: '#696969',

                    bgColor: '#FFFFFF',

                    borderColor: '#eee',

                    size:

                },

                clear: {

                    color: '#000000',

                    borderColor: '#ccc',

                    size:

                }

            }

        }, function(ret, err) {

            if (ret) {

                alert(JSON.stringify(ret));

            } else {

                alert(JSON.stringify(err));

            }

        });

    }

    function close_s() {

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

        UISearchBar.close();

    }

    function setText_s() {

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

        UISearchBar.setText({

            text: '设置语音识别的文本'

        });

    }

    function clearHistory_s() {

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

        UISearchBar.clearHistory();

    }

</script>

apicloud UISearchBar 使用方法的更多相关文章

  1. apicloud常用分享方法

    app中经常会有分享的功能,不管是分享商品还是文字还是图片或者是发送给微信好友扣扣好友,一下做一总结. 分享的样式(分享所有的样式模块):MNActionButton. 在apicloud 中添加这个 ...

  2. iOS开发UI篇 -- UISearchBar 属性、方法详解及应用（自定义搜索框样式）

    很多APP都会涉及到搜索框,苹果也为我们提供了默认的搜索框UISearchBar.但实际项目中我们通常需要更改系统默认搜索框的样式.为了实现这一目标,我们需要先搞懂 UISearchBar 的属性及方 ...

  3. 快捷搜索框（UISearchBar）简单实现 swift

    1.在故事板里面拖入一个搜索栏和一个的tableView.2.创建的ViewController,实现代理:UISearchBarDelegate,UITableViewDataSource,的UIT ...

  4. 美团HD(5)-选择城市

    DJSelectCityViewController.m #import "DJSelectCityViewController.h" #import "DJConsta ...

  5. 在navigationItem中添加搜索栏

    给navigationItem中添加个搜索栏,效果和大部分程序一样.代码如下: UISearchBar *searchBar = [[UISearchBaralloc] initWithFrame:C ...

  6. 美团HD(7)-添加取消搜索按钮

    DJSelectCityViewController.m #pragma mark - UISearchBar 代理方法 /** SearchBar开始编辑 */ - (void)searchBarT ...

  7. img标签过滤加fs模块实现图片文件缓存

    方法一:function iCache(selector) { selector.each(function(data) { //msg(data); ! function(data) { var u ...

  8. javaSE27天复习总结

    JAVA学习总结    2 第一天    2 1:计算机概述(了解)    2 (1)计算机    2 (2)计算机硬件    2 (3)计算机软件    2 (4)软件开发(理解)    2 (5) ...

  9. Apicloud学习第三天——获取云数据库的数据方法

    apicloud学习30天中的对用进行注册和登录以及数据的获取的代码,在apicloud中有单独的api对用户的增删查改进行操作,这里写下增加和查询. 增加用户数据 var model=api.req ...

随机推荐

  1. mybatis源码阅读-MappedStatement各个属性解析过程(八)

    调用方 类org.apache.ibatis.builder.xml.XMLMapperBuilder private void configurationElement(XNode context) ...

  2. 清北学堂模拟赛d1t5 拍照(photo)

    题目描述 假设这是一个二次元.LYK召集了n个小伙伴一起来拍照.他们分别有自己的身高Hi和宽度Wi.为了放下这个照片并且每个小伙伴都完整的露出来,必须需要一个宽度为ΣWi,长度为max{Hi}的相框. ...

  3. 车展（vijos P1459）

    描述 遥控车是在是太漂亮了,韵韵的好朋友都想来参观,所以游乐园决定举办m次车展.车库里共有n辆车,从左到右依次编号为1,2,…,n,每辆车都有一个展台.刚开始每个展台都有一个唯一的高度h[i].主管已 ...

  4. Color the ball 线段树 区间更新但点查询

    #include<iostream> #include<cstdio> #include<cmath> #include<cstring> #inclu ...

  5. [bzoj4066/2683]简单题_KD-Tree

    简单题 bzoj-4066 题目大意:n*n的棋盘,开始为均为0,支持:单点加权值,查询矩阵权值和,强制在线. 注释:$1\le n\le 5\cdot 10^5$,$1\le m \le 2\cdo ...

  6. 学习webpack过程并上传到github

    使用工具:sublimeText+node+git 1,一个包的文件结构,生成初始文件 在node 命令行窗口中创建demo_a文件夹 使用命令 npm init 初始化包,生成package.jso ...

  7. hdu 4850 字符串构造---欧拉回路构造序列 递归+非递归实现

    http://acm.hdu.edu.cn/showproblem.php? pid=4850 题意:构造长度为n的字符序列.使得>=4的子串仅仅出现一次 事实上最长仅仅能构造出来26^4+4- ...

  8. ubuntu下7z文件的解压方法

    apt-get install p7zip-full 控制台会打出以下信息: 正在读取软件包列表... 完成正在分析软件包的依赖关系树       正在读取状态信息... 完成       建议安装的 ...

  9. C++模板（菜鸟教程）

    C++模板(菜鸟教程) C++ 模板 模板是泛型编程的基础,泛型编程即以一种独立于任何特定类型的方式编写代码. 模板是创建泛型类或函数的蓝图或公式.库容器,比如迭代器和算法,都是泛型编程的例子,它们都 ...

  10. 95.Extjs 表单中自定义的验证规则 VTypes

    1 Ext.onReady(function(){ Ext.QuickTips.init(); //重写 (自定义)xtype Ext.apply(Ext.form.VTypes,{ repetiti ...