jquery+layui实现关键词模糊查询匹配效果代码
代码语言：html
所属分类：表格
代码描述：jquery+layui实现关键词模糊查询匹配效果代码
下面为部分代码预览，完整代码请点击下载或在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"/>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/layui/layui.all.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/js/layui/css/layui.css">
</head>
<body>
<style>
.layui-form-item {
margin-top: 15px;
}
.layui-input-block{
width: 300px;
float: left;
margin-left: 0;
}
td.on{
border-bottom: 1px solid #D60711;
color: #D60711;
}
td.active{
background: #D60711;
color: #fff;
}
.search_div{
position: fixed;
z-index: 2;
background-color: #fff;
border: 1px solid #e6e6e6;
}
.layui-table {
width: 1920px;
background-color: #fff;
color: #666;
}
</style>
<!-- 搜索组件 -->
<div class="search_div">
<form class="layui-form" action="" onSubmit="return search();">
<div class="layui-form-item">
<label class="layui-form-label">输入关键字</label>
<div class="layui-input-block">
<input type="text" name="title" required lay-verify="required" placeholder="请输入关键字" autocomplete="off" class="layui-input" id="searchInput" value="张">
</div>
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="formDemo">搜索</button>
</div>
</div>
</form>
</div>
<p style="height: 70px;"></p>
<table class="layui-table" id="all_list">
<colgroup>
<col width="150">
<col width="200">
<col>
</colgroup>
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>昵称</th>
<th>余额</th>
<th>等级</th>
<th>推荐人</th>
<th>相关资讯</th>
<th>加入时间</th>
</tr>
</thead>
<tbody>
<tr>
<td>102</td>
<td class="list_one">徐紫怡</td>
<td>原味</td>
<td>0.00</td>
<td>零售</td>
<td class="list_one">王凤明</td>
<td>你玩“双11”我推“爽11” 电商短兵相接倒计时</td>
<td>2017-12-23</td>
</tr><tr>
<td>103</td>
<td class="list_one">刘香香</td>
<td>香</td>
<td>0.00</td>
<td>零售</td>
<td class="list_one">王叶英</td>
<td>1药网旗下网络医院落地贵州 试开电子处方</td>
<td>2017-12-23</td>
</tr><tr>
<td>104</td>
<td class="list_one">王再英</td>
<td>爱心世界一王再英</td>
<td>0.00</td>
<td>团购</td>
<td class="list_one">王叶英</td>
<td>阿里加入国际反假货联盟 24家品牌不乐意</td>
<td>2017-12-23</td>
</tr><tr>
<td>105</td>
<td class="list_one">骆慧娣</td>
<td>AA冰百合</td>
<td>3688.00</td>
<td>零售</td>
<td class="list_one">骆林芳</td>
<td>韩元兑人民币汇率走势图 今日最新查询</td>
<td>2017-12-23</td>
</tr><tr>
<td>106</td>
<td class="list_one">陈敏</td>
<td>素颜</td>
<td>364.00</td>
<td>团购</td>
<td class="list_one">王森英</td>
<td>聚焦：广东7市已公开年票信息</td>
<td>2017-12-24</td>
</tr><tr>
<td>107</td>
<td class="list_one">周票英</td>
<td>喵喵毛绒玩具13396596176</td>
<td>0.00</td>
<td>零售</td>
<td class="list_one">王叶英</td>
<td>广东电商产品抽检 网民“点菜”政府“买单</td>
<td>2017-12-24</td>
</tr><tr>
<td>108</td>
<td class="list_one">田晓红</td>
<td>尚芝源～晓红</td>
<td>2.00</td>
<td>经销商</td>
<td class="list_one">轩华丽</td>
<td>方维一元夺宝系统：“引流+变现”二合一的完美</td>
<td>2017-12-24</td>
</tr><tr>
<td>109</td>
<td class="list_one">君萍</td>
<td>尘缘</td>
<td>0.00</td>
<td>零售</td>
<td class="list_one"></td>
<td>进口电商：亚健康模式下的“包税”还能硬撑多久？</td>
<td>2017-12-24</td>
</tr><tr>
<td>110</td>
<td class="list_one">秋林</td>
<td>詹秋林</td>
<td>0.00</td>
<td>经销商</td>
<td class="list_one">王叶英</td>
<td>电商横扩趋势加速家电行业升级</td>
<td>2017-12-24</td>
</tr><tr>
<td>112</td>
<td class="list_one">刘丽莉</td>
<td><a class="__yjs_email__" href="/cdn-cgi/l/email-protection" data-yjsemail="b8f9f85c0005503631">[email protected]</a><script data-yjshash='f9e31' type="text/javascript">/* <![CDATA[ */!function(t,e,r,n,c,a,p){try{t=document.currentScript||function(){for(t=document.getElementsByTagName('script'),e=t.length;e--;)if(t[e].getAttribute('data-yjshash'))return t[e]}();if(t&&(c=t.previousSibling)){p=t.parentNode;if(a=c.getAttribute('data-yjsemail')){for(e='',r='0x'+a.substr(0,2)|0,n=2;a.length-n;n+=2)e+='%'+('0'+('0x'+a.substr(n,2)^r).toString(16)).slice(-2);p.replaceChild(document.createTextNode(decodeURIComponent(e)),c)}p.removeChild(t)}}catch(u){}}()/* ]]> */</script>．化妆品</td>
<td>0.00</td>
<td>联合创始人</td>
<td class="list_one">蒋婷婷</td>
<td>广东电商产品抽检 网民“点菜”政府“买单</td>
<td>2017-12-25</td>
</tr><tr>
<td>113</td>
<td class="list_one">陈浪</td>
<td>陈浪</td>
<td>3233.00</td>
<td>总经销</td>
<td class="list_one">轩华丽</td>
<td>方维一元夺宝系统：“引流+变现”二合一的完美</td>
<td>2017-12-25</td>
</tr><tr>
<td>114</td>
<td class="list_one">茹静</td>
<td>深谷幽兰</td>
<td>0.00</td>
<td>团购</td>
<td class="list_one">费婷</td>
<td>进口电商：亚健康模式下的“包税”还能硬撑多久？</td>
<td>2017-12-25</td>
</tr><tr>
<td>115</td>
<td class="list_one">王欢</td>
<td>懒</td>
<td>0.00</td>
<td>团购</td>
<td class="list_one">张雪</td>
<td>电商横扩趋势加速家电行业升级</td>
<td>2017-12-25</td>
</tr><tr>
<td>116</td>
<td class="list_one">杨杰欣</td>
<td>懒猫焮</td>
<td>75.00</td>
<td>团购</td>
<td class="list_one">张肖阳</td>
<td>三衢电商翻番战役攻坚推进会召开</td>
<td>2017-12-25</td>
</tr><tr>
<td>117</td>
<td class="list_one">林苗苗</td>
<td>柒月</td>
<td>0.00</td>
<td>零售</td>
<td class="list_one">唐婧</td>
<td>你玩“双11”我推“爽11” 电商短兵相接倒计时</td>
<td>2017-12-26</td>
</tr><tr>
<td>118</td>
<td class="list_one">翟妙玲</td>
<td>小翟</td>
<td>1880.00</td>
<td>经销商</td>
<td class="list_one">唐婧</td>
<td>1药网旗下网络医院落地贵州 试开电子处方</td>
<td>2017-12-26</td>
</tr><tr>
<td>119</td>
<td class="list_one">郭婷婷</td>
<td>婷婷</td>
<td>0.00</td>
<td>零售</td>
<td class="list_one">唐婧</td>
<td>阿里加入国际反假货联盟 24家品牌不乐意</td>
<td>2017-12-26</td>
</tr><tr>
<td>120</td>
<td class="list_one">陈慧慧</td>
<td>都市水果(奶茶)</td>
<td>2980.00</td>
<td>经销商</td>
<td class="list_one">王森英</td>
<td>韩元兑人民币汇率走势图 今日最新查询</td>
<td>2017-12-26</td>
</tr><tr>
<td>122</td>
<td class="list_one">王以标</td>
<td>开心坐垫</td>
<td>0.00</td>
<td>零售</td>
<td class="list_one">卢慧明</td>
<td>聚焦：广东7市已公开年票信息</td>
<td>2017-12-27</td>
</tr><tr>
<td>123</td>
<td class="list_one">刘群</td>
<td>雨中行</td>
<td>0.00</td>
<td>零售</td>
<td class="list_one">轩华丽</td>
<td>三衢电商翻番战役攻坚推进会召开</td>
<td>2017-12-27</td>
</tr><tr>
<td>124</td>
<td class="list_one">沈敏娟</td>
<td>清幽伊兰</td>
<td>424.00</td>
<td>团购</td>
<td class="list_one">谭钦月</td>
<td>你玩“双11”我推“爽11” 电商短兵相接倒计时</td>
<td>2017-12-27</td>
</tr><tr>
<td>125</td>
<td class="list_one">祝小霞</td>
<td>简单</td>
<td>680.00</td>
<td>团购</td>
<td class="list_one">王叶英</td>
<td>1药网旗下网络医院落地贵州 试开电子处方</td>
<td>2017-12-27<.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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