jquery+weui实现手机端移动端关键词模糊查询匹配效果代码
代码语言:html
所属分类:表格
代码描述:jquery+weui实现手机端移动端关键词模糊查询匹配效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/weui.min.css"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/jquery-weui.min.css"> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-weui.min.js"></script> </head> <body> <style> .min_head img{ width: 2.2em; height: 2.2em; } .min_head{ margin-right: .2em; border-radius: 3em; } .two_list li a.weui-cell{ padding: 0; width: 100%; } .sign{ border: 1px solid #D60711; border-radius: 4px; color: #D60711; /*border: 1px solid #d31e1e;*/ } .sign a{ color: #D60711; } .searchhead{ position: fixed; top: 0; width: 100%; z-index: 2; } .active{ background-color: #D60711; } .active a,.active .weui-cell__ft{ color: #fff; } </style> <div class="searchhead"> <div class="weui-search-bar" id="searchBar"> <form class="weui-search-bar__form" onSubmit="return search();"> <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"> <i class="weui-icon-search"></i> <span>真实姓名搜索</span> </label> </form> <a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a> </div> </div> <p style="height: 24px;"></p> <div id="all_list"> <ul class="weui-cells two_list"> <li data-real_name="陈佳" class="weui-cell weui-cell_access list_one"> <a class="weui-cell" href="#"> <div class="weui-cell__hd min_head" > <img src="//repo.bfw.wiki/bfwrepo/image/5d653b5271e3b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90" class="min_head" onerror="this.src='//repo.bfw.wiki/bfwrepo/image/5d653b5271e3b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90'" alt=""/> </div> <div class="weui-cell__bd"> <p>陈佳</p> </div> <div class="weui-cell__ft">零售</div> </a> </li><li data-real_name="徐紫怡" class="weui-cell weui-cell_access list_one"> <a class="weui-cell" href="#"> <div class="weui-cell__hd min_head" > <img src="//repo.bfw.wiki/bfwrepo/image/5d653b5271e3b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90" class="min_head" onerror="this.src='//repo.bfw.wiki/bfwrepo/image/5d653b5271e3b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90'" alt=""/> </div> <div class="weui-cell__bd"> <p>徐紫怡</p> </div> <div class="weui-cell__ft">零售</div> </a> </li><li data-real_name="刘香香" class="weui-cell weui-cell_access list_one"> <a class="weui-cell" href="#"> <div class="weui-cell__hd min_head" > <img src="//repo.bfw.wiki/bfwrepo/image/5d653b5271e3b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90" class="min_head" onerror="this.src='//repo.bfw.wiki/bfwrepo/image/5d653b5271e3b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90'" alt=""/> </div> <div class="weui-cell__bd"> <p>刘香香</p> </div> <div class="weui-cell__ft">零售</div> </a> </li><li data-real_name="王再英" class="weui-cell weui-cell_access list_one"> <a class="weui-cell" href="#"> <div class="weui-cell__hd min_head" > <img src="//repo.bfw.wiki/bfwrepo/image/5d653b5271e3b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90" class="min_head" onerror="this.src='//repo.bfw.wiki/bfwrepo/image/5d653b5271e3b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90'" alt=""/> </div> <div class="weui-cell__bd"> <p>王再英</p> </div> <div class="weui-cell__ft">团购</div> </a> </li><li data-real_name="骆慧娣" class="weui-cell weui-cell_access list_one"> <a class="weui-cell" href="#"> <div class="weui-cell__hd min_head" > <img src="//repo.bfw.wiki/bfwrepo/image/5d653b5271e3b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90" class="min_head" onerror="this.src='//repo.bfw.wiki/bfwrepo/image/5d653b5271e3b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90'" alt=""/> </div> <div class="weui-cell__bd"> <p>骆慧娣</p> </div> <div class="weui-cell__ft">零售</div> </a> </li><li data-real_name="陈敏" class="weui-cell weui-cell_access list_one"> <a class="weui-cell" href="#"> <div class="weui-cell__hd min_head" > <img src="//repo.bfw.wiki/bfwrepo/image/5d653b5271e3b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90" class="min_head" onerror="this.src='//repo.bfw.wiki/bfwrepo/image/5d653b5271e3b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90'" alt=""/> </div> <div class="weui-cell__bd"> <p>陈敏</p> </div> <div class="weui-cell__ft">团购</div> </a> </li><li data-real_name="周票英" class="weui-cell weui-cell_access list_one"> <a class="weui-cell" href="#"> <div class="weui-cell__hd min_head" > <img src="//repo.bfw.wiki/bfwrepo/image/5d653b5271e3b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90" class="min_head" onerror="this.src='//repo.bfw.wiki/bfwrepo/image/5d653b5271e3b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90'" alt=""/> </div> <div class="weui-cell__bd"> <p>周票英</p> </div> <div class="weui-cell__ft">零售</div> </a> </li><li data-real_name="田晓红" class="weui-cell weui-cell_access list_one"> <a class="weui-cell" href="#"> <div class="weui-cell__hd min_head" > <img src="//repo.bfw.wiki/bfwrepo/image/5d653b5271e3b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90" class="min_head" onerror="this.src='//repo.bfw.wiki/bfwrepo/image/5d653b5271e3b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90'" alt=""/> </div> <div class="weui-cell__bd"> <p>田晓红</p> </div> <div class="weui-cell__ft">经销商</div> </a> </li><li data-real_name="君萍" class="weui-cell weui-cell_access list_one"> <a class="weui-cell" href="#"> <div class="weui-cell__hd min_head" > <img src="mobile/" class="min_head" onerror="this.src='//repo.bfw.wiki/bfwrepo/image/5d653b5271e3b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90'" alt=""/> </div> <div class="weui-cell__bd"> <p>君萍</p> </div> <div class="weui-cell__ft">零售</div> </a> </li><li data-real_name="秋林" class="weui-cell weui-cell_access list_one"> <a class="weui-cell" href="#"> <div class="weui-cell__hd min_head" > <img src="//repo.bfw.wiki/bfwrepo/image/5d653b5271e3b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90" class="min_head" onerror="this.src='//repo.bfw.wiki/bfwrepo/image/5d653b5271e3b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90'" alt=""/> </div> <div class="weui-cell__bd"> <p>秋林</p> </div> <div class="weui-cell__ft">经销商</div> </a> </li><li data-real_name="刘丽莉" class="weui-cell weui-cell_access list_one"> <a class="weui-cell" href="#"> <div class="weui-cell__hd min_head" > <img src="//repo.bfw.wiki/bfwrepo/image/5d653b5271e3b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90" class="min_head" onerror="this.src='//repo.bfw.wiki/bfwrepo/image/5d653b5271e3b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90'" alt=""/> </div> <div class="weui-cell__bd"> <p>刘丽莉</p> </div> <div class="weui-cell__ft">联合创始人</div> </a> </li><li data-real_name="陈浪" class="weui-cell weui-cell_access list_one"> <a class="weui-cell" href="#"> <div class="weui-cell__hd min_head" > <img src="//repo.bfw.wiki/bfwrepo/image/5d653b5271e3b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90" class="min_head" onerror="this.src='//repo.bfw.wiki/bfwrepo/image/5d653b5271e3b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90'" alt=""/> </div> <div class="weui-cell__bd"> <p>陈浪</p> </div> <div class="weui-cell__ft">总经销</div> </a> </li><li data-real_name="茹静" class="weui-cell weui-cell_access list_one"> <a class="weui-cell" href="#"> <div class="weui-cell__hd min_head" > <img src="//repo.bfw.wiki/bfwrepo/image/5d653b5271e3b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90" class="min_head" onerror="this.src='//repo.bfw.wiki/bfwrepo/image/5d653b5271e3b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90'" alt=""/> </div> <div class="weui-cell__bd"> <p>茹静</p> </div> <div class="weui-cell__ft">团购</div> </a> </li><li data-real_name="王欢" class="weui-cell weui-cell_access list_one"> <a class="weui-cell" href="#"> <div class="weui-cell__hd min_head" > <img src="//repo.bfw.wiki/bfwrepo/image/5d653b5271e3b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90" class="min_head" onerror="this.src='//repo.bfw.wiki/bfwrepo/image/5d653b5271e3b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90'" alt=""/> </div> <div class="weui-cell__bd"> <p>王欢</p> </div> <div class="weui-cell__ft">团购</div> </a> </li><li data-real_name="杨杰欣" class="weui-cell weui-cell_access list_one"> <a class="weui-cell" href="#"> <div class="weui-cell__hd min_head" > <img src="//repo.bfw.wiki/bfwrepo/image/5d653b5271e3b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90" class="min_head" onerror="this.src='//repo.bfw.wiki/bfwrepo/image/5d653b5271e3b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90'" alt=""/> </div> <div class="weui-cell__bd"> <p>杨杰欣</p> </div> <div class="weui-cell__ft">团购</div> </a> </li><li data-real_name="林苗苗" class="weui-cell weui-cell_access list_one"> <a class="weui-cell" href="#"> <div class="weui-cell__hd min_head" > <img src="//repo.bfw.wiki/bfwrepo/image/5d653b5271e3b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90" class="min_head" onerror="this.src='//repo.bfw.wiki/bfwrepo/image/5d653b5271e3b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90'" alt=""/> </div> <div class="weui-cell__bd"> <p>林苗苗</p> </div> <div class="weui-cell__ft">零售</div> </a> </li><li data-real_name="翟妙玲" class="weui-cell weui-cell_access list_one"> <a class="weui-cell" href="#"> <div class="weui-cell__hd min_head" > <img src="//repo.bfw.wiki/bfwrepo/image/5d653b5271e3b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90" class="min_head" onerror="this.src='//repo.bfw.wiki/bfwrepo/image/5d653b5271e3b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90'" alt=""/> </div> <div class="weui-cell__bd"> <p>翟妙玲</p> </div> <div class="weui-cell__ft">经销商</div> </a> </li><li data-real_name="郭婷婷" class="weui-cell weui-cell_access list_one"> <a class="weui-cell" href="#"> <div class="weui-cell__hd min_head" > <img src="//repo.bfw.wiki/bfwrepo/image/5d653b5271e3b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90" class="min_head" onerror="this.src='//repo.bfw.wiki/bfwrepo/image/5d653b5271e3b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90'" alt=""/> </div> <div class="weui-cell__bd"> <p>郭婷婷</p> </div> <div class="weui-cell__ft">零售</div> </a> </li><li data-real_name="陈慧慧" class="weui-cell weui-cell_access list_one"> <a class="weui-cell" href="#"> <div class="weui-cell__hd min_head" > <img src="//repo.bfw.wiki/bfwrepo/image/5d653b5271e3b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90" class="min_head" onerror="this.src='//repo.bfw.wiki/bfwrepo/image/5d653b5271e3b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90'" alt=""/> </div> <div class="weui-cell__bd"> <p>陈慧慧</p> </div> <div class="weui-cell__ft">经销商</div> </a> </li><li data-real_name="王以标" class="weui-cell weui-cell_access list_one"> <a class="weui-cell" href="#"> <div class="weui-cell__hd min_head" > <img src="//repo.bfw.wiki/bfwrepo/image/5d653b5271e3b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90" class="min_head" onerror="this.src='//repo.bfw.wiki/bfwrepo/image/5d653b5271e3b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90'" alt=""/> </div> <div class="weui-cell__bd"> <p>王以标</p> </div> <div class="weui-cell__ft">零售</div> </a> </li><li data-real_name="刘群" class="weui-cell weui-cell_access list_one"> <a class="weui-cell" href="#"> <div class="weui-cell__hd min_head" > <img src="//repo.bfw.wiki/bfwrepo/image/5d653b5271e3b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90" class="min_head" onerror="this.src='//repo.bfw.wiki/bfwrepo/image/5d653b5271e3b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90'" alt=""/> </div> <div class="weui-cell__bd"> <p>刘群</p> </div> <div class="weui-cell__ft">零售</div> </a> </li><li data-real_name="沈敏娟" class="weui-cell weui-cell_access list_one"> <a class="weui-cell" href="#"> <div class="weui-cell__hd min_head" > <img src="//repo.bfw.wiki/bfwrepo/image/5d653b5271e3b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90" class="min_head" onerror="this.src='//repo.bfw.wiki/bfwrepo/image/5d653b5271e3b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90'" alt=""/> </div> <div class="weui-cell__bd"> <p>沈敏娟</p> </div> <div class="weui-cell__ft">团购</div> </a> </li><li data-real_name="祝小霞" class="weui-cell weui-cell_access list_one"> <a class="weui-cell" href="#"> <div class="weui-cell__hd min_head" > <img src="//repo.bfw.wiki/bfwrepo/image/5d653b5271e3b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90" class="min_head" onerror="this.src='//repo.bfw.wiki/bfwrepo/image/5d653b5271e3b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90'" alt=""/> </div> <div class="weui-cell__bd"> <p>祝小霞</p> </div> <div class="weui-cell__ft">团购</div> </a> </li><li data-real_name="赵丽丽" class="weui-cell weui-cell_access list_one"> <a class="weui-cell" href="#"> <div class="weui-cell__hd min_head" > <img src="//repo.bfw.wiki/bfwrepo/image/5d653b5271e3b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90" class="min_head" onerror="this.src='//repo.bfw.wiki/bfwrepo/image/5d653b5271e3b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90'" alt=""/> </div> <div class="weui-cell__bd"> <p>赵丽丽</p> </div> <div class="weui-cell__ft">总经销</div> </a> </li><li data-real_name="胡斌" class="weui-cell weui-cell_access list_one"> <a class="weui-cell" href="#"> <div class="weui-cell__hd min_head" > <img src="mobile/" class="min_head" onerror="this.src='//repo.bfw.wiki/bfwrepo/image/5d653b5271e3b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90'" alt=""/> </div> <div class="weui-cell__bd"> <p>胡斌</p> </div> <div class="weui-cell__ft">零售</div> </a> </li><li data-real_name="唐坚" class="weui-cell weui-cell_access list_one"> <a class="weui-cell" href="#"> <div class="weui-cell__hd min_head" > <img src="//repo.bfw.wiki/bfwrepo/image/5d653b5271e3b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90" class="min_head" onerror="this.src='//repo.bfw.wiki/bfwrepo/image/5d653b5271e3b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90'" alt=""/> </div> <div class="weui-cell__bd"> <p>唐坚</p> </div> <div class="weui-cell__ft">经销商</div> </a> </li><li data-real_name="王雪" class="weui-cell weui-cell_access list_one"> <a class="weui-cell" href="#"> <div class="weui-cell__hd min_head" > <img src="mobile/" class="min_head" onerror="this.src='//repo.bfw.wiki/bfwrepo/image/5d653b5271e3b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90'" alt=""/> </div> <div class="weui-cell__bd"> <p>王雪</p> </div> <div class="weui-cell__ft">零售</div> </a> </li><li data-real_name="徐晓萍" class="weui-cell weui-cell_access list_one"> <a class="weui-cell" href="#"> <div class="weui-cell__hd min_head" > <img src="//repo.bfw.wiki/bfwrepo/image/5d653b5271e3b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90" class="min_head" onerror="this.src='//repo.bfw.wiki/bfwrepo/image/5d653b5271e3b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90'" alt=""/> </div> <div class="weui-cell__bd"> <p>徐晓萍</p> </div> <div class="weui-cell__ft">经销商</div> </a> </li><li data-real_name="陈美华" class="weui-cell weui-cell_access list_one"> .........完整代码请登录后点击上方下载按钮下载查看
网友评论0