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