正文

html中layui+jfinal模板实现前端搜索功能

淡淡人生过  2022-02-11  309

关键词：

 <input type="text" id="campus" class="layui-input" onkeyup="ck(this.value);" placeholder="请输入要查找的英语屋">//输入触发框

显示数据的地方
<div class="layui-inline" id="campus">
                <label class="layui-form-label">#(i18n.get('勾选校区'))</label>
                <div class="layui-input-block layui-form" id="cam" lay-filter="cam">
                    #if(sysAccount.id)
　　　　　　　　　　　　　　//把用户的校区存到作用域中
                        #set(sysAccountCampusIds = CampusKit.findCampusIdsByAccount(sysAccount))
                    #else
                        #set(sysAccountCampusIds = "")
                    #end
                    #for(x : CampusKit.findListByAccount(loginAccount))
                        <input type='checkbox' value="#(x.id)" name='campus' 
                        #(sysAccountCampusIds.contains(x.id.toString()) ? 'checked="checked"':'')
                        title="#(x.campusName)" id='campusBox#(x.id)'>
                    #end
                </div>
            </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)'>

        {{#("#") } }}

{{#("#") if(d.isShow != null && d.isShow.length > 0){ }}
　　　　　　#if(sysAccountCampusIds.contains(x.id.toString()))
　　　　　　　　<input type='checkbox' value="#(x.id)" name='campus'
　　　　　　　　#(sysAccountCampusIds.contains(x.id.toString()) ? 'checked="checked"':'')
　　　　　　　　title="#(x.campusName)" id='campusBox#(x.id)'>
　　　　　　#end
　　　　{{#("#") } }}

  #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,"isShow":campusName}, //json值,isShouw为了那边做出判断使用
            function(html){
        $("#cam").html(html);//jquery把模板加载到div   id是cam中<div id="cam"></div>
        console.log(html);
        layui.form.render(null,"cam"); //更新这个容器中的页面
    });
      
}

记录学习历程...

大师兄真的很厉害啊。各种的都会...

前端html中jquery实现对文本的搜索并把搜索相关内容显示出来

...一个div里面所以显示的时候就是显示整个div。先看看实现的效果：当我输入瓦窑村就把相关带瓦窑的客户信息显示出来并把瓦窑村字体设置红色，其他的就不显示；下面看html代码： <body>&l 查看详情

django实现组合搜索的方法示例(代码片段)

...一、实现方法二、基本原理三、代码样例　　方法1：纯模板语言实现　　方法2：使用simpletag实现四、其他变化　　1.model定义　　2.处理函数变化　　3.simpletag相应改变一、实现方法1.纯模板语言实现2.自定义simpletag实现（本... 查看详情

全栈之前端编程javaweb使用thymeleaf局部刷新结合layui插件实现html分页(代码片段)

...，精彩抢先看目录1、前言2、正文2.1开发环境介绍2.2实现代码2.3实现流程说明2.4实现效果程序人生，精彩抢先看1、前言最近个人在做开发的时候，需要实现前端的Html页面分页。由于好一段时间没写前端的代码了... 查看详情

全栈之前端编程javaweb使用thymeleaf局部刷新结合layui插件实现html分页(代码片段)

00006-java下载一个excel模板(文件)，前端layui按钮(代码片段)

下载按钮：<buttonclass="layui-btnlayui-btn-sm"data-type="downTemplate">模板下载</button>对应方法：downTemplate:function()window.open(ctx+"/download/template/customer");,java控制层：importorg.apache.common 查看详情

基于layui模块的后台匹配搜索框

...数据，因为数据量庞大，且变化，因此不能一次性渲染至前端页面，所以只能通过输入关键字，后台获取关键字搜索匹配返回数据给前端的方法，然后在网上大量寻找，始终找不到能完美融合项目的插件，于是萌发了自己写一个... 查看详情

layui前端分页不要每次调后端

参考技术AlayUI实现前端分页和后端分页本文实例为大家分享了layUI实现前端分页和后端分页效果，供大家参考，具体内容如下layui后端分页：functionpagination(curr,gwayId,mlity,ePart)$(".manage_ys_list").html('加载中...');letdd=conditi... 查看详情

前端模板inspinia

前端模板，可以下个免费的，可以花点小钱买。或者github搜索一个 https://chuibility.github.io/inspinia/http://cn.inspinia.cn/layouts.html 查看详情

10.django中模板变量详解

...样实现的呢? 这就是本文要讲述的内容——Django中的模板变量！1.模板变量！可以在前端页面中使用模板变量来取数据库中的数据，实现前端页面数据动态显示。（1）模板变量使用规则：（在HTML模... 查看详情

10.django中模板变量详解

django实现组合搜索的方法示例

目录一、实现方法二、基本原理三、代码样例方法1：纯模板语言实现方法二：使用simpletag实现四、其他变化1.model定义2.处理函数变化3.simpletag相应改变一、实现方法1.纯模板语言实现2.自定义simpletag实现（本质是简化了纯模... 查看详情

使用velocity模板使javaweb的html+js实现模块化

页面上一些基础数据或者其他页面经常用到部分，可以独立出来做成小组件，组件预留调用入口，需要的页面直接调用即可。如图，页面中的展示分类和搜索标签在多个页面重复使用，可以将这部分内容独立出来，做成组件，供... 查看详情

前端三剑客页面模板html标签

前端什么是前端前端即网站前台部分，运行在PC端，移动端等浏览器上展现给用户浏览的网页。前端技术一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，包括基本的H... 查看详情

layui每次搜索不清空搜索条件

...列宽度，支持排序，支持多级表头，支持单元格的自定义模板，支持对表格重载（比如搜索、条件筛选等），支持复选框，支持分页，支持单元格编辑等等一些列功能。查看详情

获取带有静态 html 内容的 wordpress 页面模板以在搜索中显示

】获取带有静态html内容的wordpress页面模板以在搜索中显示【英文标题】：Gettingwordpresspagetemplatewithstatichtmlcontenttoshowinsearches【发布时间】：2020-01-2818:25:41【问题描述】：我已经设置了一个带有静态HTML的Wordpress页面模板（通过在... 查看详情

如何使用高级 PDF/HTML 模板工具在 NetSuite 保存的搜索中打印多个公式字段？

】如何使用高级PDF/HTML模板工具在NetSuite保存的搜索中打印多个公式字段？【英文标题】：HowdoyouprintmultipleformulafieldsonaNetSuiteSavedSearchusingtheAdvancedPDF/HTMLTemplatestool?【发布时间】：2018-01-2922:33:26【问题描述】：在NetSuite中，如何使... 查看详情

基于html+echarts实现的大数据可视化平台模板（含源码）

...给大家分享几个基于ECharts实现的数据可视化大屏的通用模板。源码下载地址在文章末尾！效果演示大数据可视化模板1：大数据可视化平台模板2：大数据可视化系统分析平台：大数据可视化系统分析查看详情