weui 搜索 weui-search-bar

效果图

1、首先引入css跟js

<link rel="stylesheet" type="text/css" href="lib/weui.min.css">
<script src='js/jquery.min.js'></script>
<script src='lib/jquery-weui.min.js'></script>

2、html内容

 <div class="weui-search-bar" id="searchBar"><form class="weui-search-bar__form" onkeydown="if(event.keyCode==13) return false;"><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:clear()" class="weui-icon-clear" id="searchClear"></a></div><label class="weui-search-bar__label" id="searchText" onclick="OnsearchText()"><i class="weui-icon-search"></i><span>请输入你想要查看的关键字</span></label></form><a href="javascript:cancel()" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a></div>// 显示提示选择<div class="aas" style="display:none;"><button type="" class="aass">桌子</button><button type="" class="aass">椅子</button><button type="" class="aass">电脑</button><button type="" class="aass">a</button></div>   // 显示可选内容<div class="content"><div class="weui-cell"><div class="weui-cell__bd"><p>桌子</p></div></div>        </div>

2-1框架内

 <div class="weui-search-bar" id="searchBar"><form class="weui-search-bar__form" onkeydown="if(event.keyCode==13) return false;"><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:clear()" class="weui-icon-clear" id="searchClear"></a></div><label class="weui-search-bar__label" id="searchText" onclick="OnsearchText()"><i class="weui-icon-search"></i><span>请输入你想要查看的关键字</span></label></form><a href="javascript:cancel()" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a></div>

2-2显示提示选择

 <div class="aas" style="display:none;"><button type="" class="aass">桌子</button><button type="" class="aass">椅子</button><button type="" class="aass">电脑</button><button type="" class="aass">a</button></div>

2-3显示可选内容

 <div class="content"><div class="weui-cell"><div class="weui-cell__bd"><p>桌子</p></div></div>     </div>

3、js

// 商品数组
var seller = [{name:'桌子'},{name:'桌子1'},{name:'椅子2'},{name:'椅子2'},{name:'电脑2'},{name:'电脑2'},{name:'电脑桌子2'},{name:'桌子2'},{name:'电脑桌子3'},{name:'电脑桌子a'},{name:'电脑桌子aa'},{name:'桌子a'},{name:'椅子a'},{name:'电脑a'}];allseller();// 获取到所有商品function allseller(){var contentHtml = '';for(var i=0;i<seller.length;i++){contentHtml += '<div class="weui-cell"><div class="weui-cell__bd"><p>'+seller[i].name+'</p></div></div>'} $(".content").html(contentHtml);      }// 显示搜索内容function sousuo(InputVal){allseller()var text = InputVal$('.weui-cell').each(function () {var $self = $(this);var flag = $self.text().search(text);if (flag > -1) {$self.css("display", "");} else {$self.css("display", "none");}});         }       // 点击取消时显示所有function cancel(){$(".aas").hide();allseller();}// 点击X清除显示所有function clear(){$(".content").html('');}// 点击.aass执行$(".aass").click(function(){$("#searchInput").val($(this).text())sousuo($("#searchInput").val());})// 输入值时执行$('#searchInput').bind('input propertychange', function() {sousuo($("#searchInput").val())});function OnsearchText(){$(".aas").show();$(".content").html('');}

3-1 商品数组

     var seller = [{name:'桌子'},{name:'桌子1'},{name:'椅子2'},{name:'椅子2'},{name:'电脑2'},{name:'电脑2'},{name:'电脑桌子2'},{name:'桌子2'},{name:'电脑桌子3'},{name:'电脑桌子a'},{name:'电脑桌子aa'},{name:'桌子a'},{name:'椅子a'},{name:'电脑a'}];

3-2 获取到所有商品

     function allseller(){var contentHtml = '';for(var i=0;i<seller.length;i++){contentHtml += '<div class="weui-cell"><div class="weui-cell__bd"><p>'+seller[i].name+'</p></div></div>'} $(".content").html(contentHtml);      }

3-3 显示搜索内容

     function sousuo(InputVal){allseller()var text = InputVal$('.weui-cell').each(function () {var $self = $(this);var flag = $self.text().search(text);if (flag > -1) {$self.css("display", "");} else {$self.css("display", "none");}});

weui 搜索 weui-search-bar相关推荐

禁忌搜索(Tabu Search)原理梳理和应用细节-附求解VRPTW问题C++代码
文章目录 1.禁忌搜索(TS)的相关概念 1.1 搜索空间(search space) 1.2 邻域结构(neighborhood structure) 1.3 禁忌表(tabu) 1.4 解禁标准( ...
Search Bar On Browser_4
Search Bar On Browser 摘要: 本文介绍主流浏览器的搜索引擎插件标准.本文还解释如何在浏览器的添加搜索引擎插件. 本文内容: 简介一. Sherlock标准二. ...
C语言实现跳转搜索jump search算法(附完整源码)
跳转搜索jump search算法跳转搜索jump search算法的完整源码(定义,实现,main函数测试) 跳转搜索jump search算法的完整源码(定义,实现,main函数测试) #inc ...
浅析集束搜索(Bean Search) 算法
集束搜索(Bean Search) 背景场景一:如果说,你想实现:输入一段语音片段,经过一一列操作,实现最后输出语音的内容.再此过程中,假如你不想随机输出一些结果,而想得到最好最优的输出结果,此 ...
php制作搜索框_搜索功能(search.php)模板制作 - WordPress模板开发
搜索功能(search.php)模板制作搜索功能是任何网站都必须的功能,通过搜索功能,用户可以快速的在我们的网站上找到自己需要的内容.在wordpress模板制作教程中,搜索功能也需要制作出来,这就 ...
线搜索(line search)方法
转自http://www.cnblogs.com/kemaswill/p/3416231.html 在机器学习中, 通常需要求某个函数的最值(比如最大似然中需要求的似然的最大值). 线搜索(line ...
广度优先搜索 - 宽度优先搜索 - 横向优先搜索 (breadth-first search，BFS)
广度优先搜索 - 宽度优先搜索 - 横向优先搜索 (breadth-first search,BFS) 1. 广度优先搜索 - 宽度优先搜索 - 横向优先搜索 (breadth-first searc ...
禁忌搜索(Tabu Search)算法及python实现
禁忌搜索(Tabu Search)算法及python实现版权声明:本文为博主原创文章,博客地址:https://blog.csdn.net/adkjb,未经博主允许不得转载. 禁忌搜索(Tabu S ...
元启发式算法 | 禁忌搜索(Tabu Search)解决TSP问题(Python)
[元启发式算法]禁忌搜索(Tabu Search)解决TSP问题(Python) 文章目录 [元启发式算法]禁忌搜索(Tabu Search)解决TSP问题(Python) 1.Tabu Search ...
局部搜索：禁忌搜索(Tabu Search)解决TSP问题的python案例
禁忌搜索解决TSP问题的python案例 Tabu Search 禁忌(Tabu Search)算法是一种亚启发式(meta-heuristic)随机搜索算法,它从一个初始可行解出发,选择一系列的特定 ...

weui 搜索 weui-search-bar

weui 搜索 weui-search-bar相关推荐

最新文章

热门文章