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-orie.........完整代码请登录后点击上方下载按钮下载查看
网友评论0