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">
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0