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

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. facebook充值实时更新接口文档翻译 希望对做facebook充值的小伙伴有帮助

    Realtime Updates for Payments are an essential method by which you are informed of changes to orders ...

  2. Scrapy开发指南

    一.Scrapy简介 Scrapy是一个为了爬取网站数据,提取结构性数据而编写的应用框架. 可以应用在包括数据挖掘,信息处理或存储历史数据等一系列的程序中. Scrapy基于事件驱动网络框架 Twis ...

  3. python学习笔记（字符串操作、字典操作、三级菜单实例）

    字符串操作 name = "alex" print(name.capitalize()) #首字母大写 name = "my name is alex" pri ...

  4. 【原】Go语言及Web框架Beego环境无脑搭建

    本文涉及软件均以截至到2013年10月12日的最新版本为准 1. 相关软件准备: 1) go1.2rc1.windows-386.msi,对应32位windows系统安装使用 下载地址: https: ...

  5. JavaScript中的slice,splice,substr,substring,split的区别

    万恶的输入法,在sublime中会显示出繁体字,各位看官见谅. 1.slice()方法:该方法在数组和string对象中都拥有. var a = [1,2,3,4,5,6]; var s = 'thi ...

  6. Sharepoint 2010、Sharepoint 2013浏览器打开CAD（.dwg）

    客户端配置 1.安装FreeDWGViewer.exe,设置浏览器查看 2.检查ActiveX插件是否已安装成功 服务端配置 1.开启许可模式或者通过脚本将"application/acad ...

  7. [Android]Dagger2Metrics - 测量DI图表初始化的性能（翻译）

    以下内容为原创,欢迎转载,转载请注明 来自天天博客:http://www.cnblogs.com/tiantianbyconan/p/5098943.html Dagger2Metrics - 测量D ...

  8. [转]ASP.NET应用程序生命周期趣谈(二)

    在上回书开始的时候我们提到博客园的IIS看了一眼我的请求后就直接交给ASP.NET去处理了,并且要求ASP.NET处理完之后返回HTML以供展示. 那么我们不仅要问: 1,    IIS肯定是没有眼睛 ...

  9. 阶段一：通过网络请求，获得并解析JSON数据（天气应用）

    “阶段一”是指我第一次系统地学习Android开发.这主要是对我的学习过程作个记录. 在上一篇阶段一:解析JSON中提到,最近在写一个很简单的天气预报应用.即使功能很简单,但我还是想把它做成一个相对完 ...

  10. C# List 排序各种用法与比较

    下面介绍各种List的sort的用法与比较 首先,我们建一个People的实体,有name.age.sex的属性,我们要排序的字段是年龄age 新建一个实体类 public class People ...