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

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提供了一个简 ...