<input type="text" id="campus" class="layui-input" onkeyup="ck(this.value);" placeholder="请输入要查找的英语屋">//输入触发框 <div class="layui-input-block layui-form" id="cam" lay-filter="cam">这个是要显示的校区的容器,渲染的就是这个页面</div>//模板数据//因为这块用到了layui的语句和jfinal的语句,所以需要把layui的#用jfinal的#让layui当作普通字符串输出<script type="text/html" id="searchText"> ???????#for(x : CampusKit.findListByAccount(loginAccount))//jfinal的语句,循环 ???????{{#("#") ?if(isContains("#(x.campusName)",d.val)){ }}//这里用到了layui的语句和jfinal的语句结合,#(x.campusName) jfinal 的语句,{{#("#") ?if(isContains("#(x.campusName)",d.val)){ }}中的d.val因为if用的是layui的语句,所以直接写就可以,一般都是{{d.val}}这样写 ???????????????<input type=‘checkbox‘ value="#(x.id)" name=‘campus‘ ????????????????#(sysAccountCampusIds.contains(x.id.toString()) ? ‘checked="checked"‘:‘‘) ???????????????title="#(x.campusName)" id=‘campusBox#(x.id)‘> ???????{{#("#") } }} ???????#end</script>//str字符串是否包含substr字符串function isContains(str, substr) { ???return str.indexOf(substr) >= 0;}//layui模板的写法var getTpl = searchText.innerHTML;//写到js方法外边这样只加载一次,不用每次都加载,速度快/* 前端页面的搜索 */ function ck(campusName){ ???//渲染模版 ???layui.laytpl(getTpl).render({"val":campusName}, //json值 ???????????function(html){ ???????$("#cam").html(html);//jquery把模板加载到div ??id是cam中<div id="cam"></div> ???????console.log(html); ???????layui.form.render(null,"cam"); //更新这个容器中的页面 ???}); ?????}
记录学习历程...
大师兄真的很厉害啊。各种的都会...
html中layui+jfinal模板实现前端搜索功能
原文地址:https://www.cnblogs.com/renjianjun/p/8969464.html