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