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. nyoj_88_汉诺塔（一）_201308201730

    汉诺塔(一)时间限制:1000 ms | 内存限制:65535 KB难度:3描述在印度,有这么一个古老的传说:在世界中心贝拿勒斯(在印度北部)的圣庙里,一块黄铜板上插着三根宝石针.印度教的主神梵天在创 ...

  2. SSM(spring mvc+spring+mybatis)学习路径——2-2、spring MVC拦截器

    目录 2-2 Spring MVC拦截器 第一章 概述 第二章 Spring mvc拦截器的实现 2-1 拦截器的工作原理 2-2 拦截器的实现 2-3 拦截器的方法介绍 2-4 多个拦截器应用 2- ...

  3. Spring MVC-处理程序映射（Handler Mapping）-简单的Url处理程序映射（Simple Url Handler Mapping）示例（转载实践）

    以下内容翻译自:https://www.tutorialspoint.com/springmvc/springmvc_simpleurlhandlermapping.htm 说明:示例基于Spring ...

  4. dlk 模板

    struct DLX { int n , m,size; int U[N],D[N],R[N],L[N],row[N],col[N]; int ans[N],S[N]; int ansd; void ...

  5. python 005 正则表达式

    . 任意字符 ^ 匹配字符串开始 $ 匹配字符串结尾 * 匹配前面出现了零次或多次 + 匹配前面出现了一次或多次 ? 匹配前面出现零次或一次 {N} 匹配前面出现了N次 {M,N} 匹配重复出现M-N ...

  6. Android 组件ContentProvider

    Android 组件ContentProvider Android的数据存储有五种方式Shared Preferences.网络存储.文件存储.外储存储.SQLite,一般这些存储都仅仅是在单独的一个 ...

  7. Expression Trees (C# and Visual Basic)

    https://msdn.microsoft.com/en-us/library/bb397951.aspx Expression trees represent code in a tree-lik ...

  8. Mybatis 碰到的一些问题

    1. SQL语句参数无法获取:nested exception is org.apache.ibatis.reflection.ReflectionException: There is no get ...

  9. Android WiFi开发教程（三）——WiFi热点数据传输

    在上一篇文章中介绍了WiFi的搜索和连接,如果你还没阅读过,建议先阅读上一篇Android WiFi开发教程(二)——WiFi的搜索和连接.本篇接着简单介绍手机上如何通过WiFi热点进行数据传输. 跟 ...

  10. Android+Jquery Mobile学习系列(2)-HTML5/Jquery Mobile基础

    本章介绍两个关键字[HTML5]和[Jquery Mobile],简单说这两者的关系是:HTML5作为主体,Jquery Mobile在HTML5的基础上对其进行了优化.装饰. HTML5 HTML5 ...