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

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. [C1] 分离 C1FlexGrid 滚动条

    一  场景介绍 Silverlight 5.0 的 C1FlexGrid 控件里自带的滚动条,是嵌入在 C1FlexGrid 宽度和高度的范围里的,效果如下图所示: (未隐藏自带滚动条) (隐藏自带的 ...

  2. 运行第一个PHP程序

    由于PHP比较简单,所以闲来无事学习一下PHP的程序. 之前安装XAMPP出现各种错误,于是下载了PHPStudy,真的十分简单方便,感谢网站开发者. 可以在网站的软件下载中下载,附上首页链接:htt ...

  3. java.net.SocketException: Connection reset

    java.net.SocketException: Connection reset at java.net.SocketInputStream.read(SocketInputStream.java ...

  4. 在MongoDB的MapReduce上踩过的坑

    太久没动这里,目前人生处于一个新的开始.这次博客的内容很久前就想更新上来,但是一直没找到合适的时间点(哈哈,其实就是懒),主要内容集中在使用Mongodb时的一些隐蔽的MapReduce问题: 1.R ...

  5. FastDFS 安装及使用

    FastDFS 安装及使用 2012-11-17 13:10:31|  分类: Linux|举报|字号 订阅     Google了一下,流行的开源分布式文件系统有很多,介绍如下:   mogileF ...

  6. springmvc+spring+mybatis+maven项目集成shiro进行用户权限控制【转】

    项目结构:   1.maven项目的pom中引入shiro所需的jar包依赖关系 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 ...

  7. 安装cocoapods遇到两大坑-Ruby版本升级和Podfile的配置

    今天安装cocoapods #移除原有ruby源 $ gem sources --remove https://rubygems.org/ #使用可用的淘宝网 $ gem sources -a htt ...

  8. 靠谱的datatable转json方法

    今天有之前同事问我要datatable转json的方法,以前自己也弄过,但感觉网上有很多不靠谱的方法.所以自己在博客里记录一个,当然也是网上找的,但是这个靠谱一点,起码可以用不会报错,所以叫他靠谱的d ...

  9. ContentProvider中央档案馆,以及获取联系人电话的示例

    Android官方文档介绍的数据存储方式共有五种,sqlite,SharedPreferences,网络存储,外储存储,文件存储,但是这些数据都无法进行共享,那么我们就引入了今天的主角:Content ...

  10. Android笔记——Android自定义控件

    目录: 1.自定义控件概述 01_什么是自定义控件 Android系统中,继承Android系统自带的View或者ViewGroup控件或者系统自带的控件,并在这基础上增加或者重新组合成我们想要的效果 ...