点击搜索，会显示关键字取消按钮，输入文字，会在搜索框下，有相应的列表显示。
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(); }); });