点击搜索，会显示关键字取消按钮，输入文字，会在搜索框下，有相应的列表显示。

HTML:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0" />

        <!--医首信息自定义css-->

        <link rel="stylesheet" type="text/css" href="../css/jiaj.css" />

        <!--官网demo css-->

        <link rel="stylesheet" type="text/css" href="../css/example.css" />

        <!--weui css-->

        <link rel="stylesheet" type="text/css" href="../css/weui.css" />

        <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.0/style/weui.min.css" />

        <!--jQuery weui-->

        <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/0.8.0/css/jquery-weui.min.css">

        <title>历史答案</title>

    </head>ai

    <body ontouchstart>

        <!--页面切换必须要添加js_container-->

        <div class="container js_container">

            <div class="page">

                <div class="weui-jiaj-panel">

                    <div class="page__bd">

                        <!--<a href="javascript:;" class="weui-btn weui-btn_primary">点击展现searchBar</a>-->

                        <div class="weui-search-bar" id="searchBar">

                            <form class="weui-search-bar__form">

                                <div class="weui-search-bar__box">

                                    <i class="weui-icon-search"></i>

                                    <input type="search" class="weui-search-bar__input" id="searchInput" placeholder="搜索" required="">

                                    <a href="javascript:" class="weui-icon-clear" id="searchClear"></a>

                                </div>

                                <label class="weui-search-bar__label" id="searchText" style="transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1);">

                                    <i class="weui-icon-search"></i>

                                    <span>搜索</span>

                                </label>

                            </form>

                            <a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a>

                        </div>

                        <div class="weui-cells searchbar-result" id="searchResult" style="display: none;">

                            <div class="weui-cell weui-cell_access">

                                <div class="weui-cell__bd weui-cell_primary">

                                    <p>实时搜索文本</p>

                                </div>

                            </div>

                            <div class="weui-cell weui-cell_access">

                                <div class="weui-cell__bd weui-cell_primary">

                                    <p>实时搜索文本</p>

                                </div>

                            </div>

                            <div class="weui-cell weui-cell_access">

                                <div class="weui-cell__bd weui-cell_primary">

                                    <p>实时搜索文本</p>

                                </div>

                            </div>

                            <div class="weui-cell weui-cell_access">

                                <div class="weui-cell__bd weui-cell_primary">

                                    <p>实时搜索文本</p>

                                </div>

                            </div>

                        </div>

                    </div>

                </div>

            </div>

        </div>

        <!--页面切换-->

        <script src="https://res.wx.qq.com/open/libs/zepto/1.1.6/zepto.js"></script>

        <script src="https://cdn.bootcss.com/jquery-weui/0.8.2/js/jquery-weui.min.js"></script>

        <script src="../js/doctor/search.js"></script>

    </body>

</html>

所有的css都使用weui的样式。

JS:

    $(function(){

        var $searchBar = $('#searchBar'),

            $searchResult = $('#searchResult'),

            $searchText = $('#searchText'),

            $searchInput = $('#searchInput'),

            $searchClear = $('#searchClear'),

            $searchCancel = $('#searchCancel');

        function hideSearchResult(){

            $searchResult.hide();

            $searchInput.val('');

        }

        function cancelSearch(){

            hideSearchResult();

            $searchBar.removeClass('weui-search-bar_focusing');

            $searchText.show();

        }

        $searchText.on('click', function(){

            $searchBar.addClass('weui-search-bar_focusing');

            $searchInput.focus();

        });

        $searchInput

            .on('blur', function () {

                if(!this.value.length) cancelSearch();

            })

            .on('input', function(){

                if(this.value.length) {

                    $searchResult.show();

                } else {

                    $searchResult.hide();

                }

            })

        ;

        $searchClear.on('click', function(){

            hideSearchResult();

            $searchInput.focus();

        });

        $searchCancel.on('click', function(){

            cancelSearch();

            $searchInput.blur();

        });

    });

weui 搜索框的更多相关文章

  1. 微信小程序 —搜索框

    wxSearch优雅的微信小程序搜索框 一.功能 支持自定义热门key 支持搜索历史 支持搜索建议 支持搜索历史(记录)缓存 二.使用 1.将wxSearch文件夹整个拷贝到根目录下 2.引入 // ...

  2. HTML5轻松实现搜索框提示文字点击消失---及placeholder颜色的设置

    在做搜索框的时候无意间发现html5的input里有个placeholder属性能轻松实现提示文字点击消失功能,之前还傻傻的在用js来实现类似功能... 示例 <form action=&quo ...

  3. WPF 自定义搜索框

      控件中的搜索图标下载地址:http://www.easyicon.net/1183666-Search_icon.html 搜索框设计过程比较简单: 1.先定义一个Rectangle作为背景 2. ...

  4. 搜索框(Thinkphp5.0)

    1.普通关键词搜索框 模板部分代码: <form name='searchform' action='/index.php/module/controller/search' method='g ...

  5. IOS第二天-新浪微博 - 添加搜索框，弹出下拉菜单 ，代理的使用 ，HWTabBar.h（自定义TabBar）

    ********HWDiscoverViewController.m(发现) - (void)viewDidLoad { [super viewDidLoad]; // 创建搜索框对象 HWSearc ...

  6. 用jsonp实现搜索框功能

    用jsonp实现搜索框功能 前面的话: 在上周本来想发一篇模仿必应搜索的界面.但是在准备写文章之前突然想到前面学习了ajax技术,在这里我也让我的页面有一种不需要手动刷新就能获取到数据.但是发现用前面 ...

  7. 淘宝购物车页面 智能搜索框Ajax异步加载数据

    如果有朋友对本篇文章的一些知识点不了解的话,可以先阅读此篇文章.在这篇文章中,我大概介绍了一下构建淘宝购物车页面需要的基础知识. 这篇文章主要探讨的是智能搜索框Ajax异步加载数据.jQuery的社区 ...

  8. jQuery+HTML5弹出创意搜索框层

    效果体验:http://hovertree.com/texiao/jquery/26/ 本效果适用于移动设备,可以使用手机等浏览效果. 代码下载:http://hovertree.com/h/bjaf ...

  9. iOS之搜索框UISearchController的使用(iOS8.0以后替代UISearchBar+display)

    在iOS 8.0以上版本中, 我们可以使用UISearchController来非常方便地在UITableView中添加搜索框. 而在之前版本中, 我们还是必须使用UISearchBar + UISe ...

随机推荐

  1. PHPUnit整合ThinkPHP的库TPUnit

    项目地址:https://github.com/web3d/TPUnit ThinkPHP PHPUnit框架集成,基于TP3.2,建议PHP 5.4以上环境. 单元测试应该是提高PHP编码质量的解决 ...

  2. java单例模式的实现方式

    一.什么是单例模式 单例:保证一个类仅有一个实例,并提供一个访问它的全局访问点. 单例模式是一种常用的软件设计模式之一,其目的是保证整个应用中只存在类的唯一个实例. 比如我们在系统启动时,需要加载一些 ...

  3. php实现设计模式之 状态模式

    <?php /*状态模式:允许一个对象在其内部状态改变时改变它的行为.对象看起来似乎修改了它的类.(行为模式) * * 在很多情况下,一个对象的行为取决于一个或多个动态变化的属性,这样的属性叫做 ...

  4. 大朋展翅 html5上传图片(三)一解决部分手机拍相册批量上传图片转向问题

    在经过前面的改进之后本来以为已经没有问题了,但经过我们神通广大的测试的测试,发现相册中的图片在上传时也会发生转向问题.既然前面都解决了拍照转向的问题,那么相册中图片的上传也容易解决.修改一下需要旋转图 ...

  5. Mysql(windows)安装

    h3 { color: rgb(255, 255, 255); background-color: rgb(30,144,255); padding: 3px; margin: 10px 0px } ...

  6. arcgis engine 中出现的内存堆栈溢出问题。

    两种解决方案: 1.循环加载mxd文档的时候出现的堆栈溢出,解决办法是每次循环结束时清空FeatureLayer,感觉并不好,但是确实可以实现功能. 2.循环调取featureclass的search ...

  7. Swift3 - String 字符串、Array 数组、Dictionary 字典的使用

    Swift相关知识,本随笔为 字符串.数组.字典的简单使用,有理解.使用错误的地方望能指正. ///************************************************** ...

  8. SVN为什么比Git更好

    首先我表明一个根本的立场,我个人更喜欢用Git,但是,这仅仅是一个个人偏好.当我们需要将一种技术方案带给整个团队的时候,并不是由我们的个人偏好作为主要决定因素,而应该充分去权衡利弊,选择对团队,对公司 ...

  9. 转载文章——从HelloWorld学习操作系统

    转载地址:https://my.oschina.net/hosee/blog/673628?p=%7b%7bcurrentPage+1%7d%7d 本文就将系统性的串联起那些知识点,方便复习和回顾.本 ...

  10. web.xml 配置中classpath: 与classpath*:的区别

    首先 classpath是指 WEB-INF文件夹下的classes目录 解释classes含义: 1.存放各种资源配置文件 eg.init.properties log4j.properties s ...