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

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. .NET文件并发与RabbitMQ（初探RabbitMQ）

    本文版权归博客园和作者吴双本人共同所有.欢迎转载,转载和爬虫请注明原文地址:http://www.cnblogs.com/tdws/p/5860668.html 想必MQ这两个字母对于各位前辈们和老司 ...

  2. 第一篇 Entity Framework Plus 之 Audit

    一般系统会有登陆日志,操作日志,异常日志,已经满足大部分的需求了.但是有时候,还是需要Audit 审计日志,审计日志,主要针对数据增,改,删操作数据变化的记录,主要是对数据变化的一个追踪过程.其中主要 ...

  3. hdu-2444-二分图判定+最大分配

    The Accomodation of Students Time Limit: 5000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K ( ...

  4. Android 手机卫士3--设置中心

    1.要点击九宫格中的条目,需要注册点击事件 // 注册九宫格单个条目的点击事件 gv_home.setOnItemClickListener(new OnItemClickListener() { / ...

  5. ArcGIS Engine开发之TocControl

    TocControl控件简介 TocControl控件的主要作用是显示当前加载的图层有哪些.采用什么样的符号等,目的是使用户对当前加载的数据有一个总体的把握.与之相关联的伙伴控件有:MapContro ...

  6. js url.slice(star,end) url.lastIndexOf('/') + 1, -4

    var url = '"http://60.195.252.25:15518/20151228/XXSX/作三角形的高.mp4")' document.title = url.sl ...

  7. Vue基本应用

    1.  returnDetail.$mount('#returnDetail');  不用el 直接可以绑定数据到页面的id上 作用区域不能交叠多个vue 实体 否则后面的vue 实体会失效. 2. ...

  8. Linux常用命令大全

    系统信息 arch 显示机器的处理器架构(1)  uname -m 显示机器的处理器架构(2)  uname -r 显示正在使用的内核版本 dmidecode -q 显示硬件系统部件 - (SMBIO ...

  9. 使用Kotlin对ViewGroup的视图进行函数使操作

    原文标题:Functional operations over Views in ViewGroup using Kotlin 原文链接:http://antonioleiva.com/functio ...

  10. Node.js 教程 04 - 模块系统

    前言: Node.js的模块系统类似于C/C++的文件引用,可以声明对象,也可以定义类 创建对象. 大家这么理解,就简单了. 定义: 为了让Node.js的文件可以相互调用,Node.js提供了一个简 ...