JS实现前端页面的搜索功能


Posted in Javascript onJune 12, 2018

效果图如下所示:

JS实现前端页面的搜索功能

<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(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   
//这里用到了layui的语句和jfinal的语句结合,#(x.campusName) jfinal 的语句,{{#("#") if(isContains("#(x.campusName)",d.val)){ }}中的d.val因为if用的是layui的语句,所以直接写就可以,一般都是{{d.val}}这样写 
    {{#("#") if(isContains("#(x.campusName)",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"); //更新这个容器中的页面 
  }); 
}

总结

以上所述是小编给大家介绍的JS实现前端页面的搜索功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript 伪数组实现方法
Oct 11 Javascript
对于this和$(this)的个人理解
Sep 08 Javascript
JavaScript DOM元素尺寸和位置
Apr 13 Javascript
JavaScript学习笔记之数组求和方法
Mar 23 Javascript
jQuery实现滚动条滚动到子元素位置(方便定位)
Jan 08 Javascript
超简单的Vue.js环境搭建教程
Mar 17 Javascript
解析Vue 2.5的Diff算法
Nov 28 Javascript
谈谈JS中的!!
Dec 07 Javascript
JS实现table表格内针对某列内容进行即时搜索筛选功能
May 11 Javascript
vue router+vuex实现首页登录验证判断逻辑
May 17 Javascript
vue ssr 指南详读
Jun 29 Javascript
详解Vue 的异常处理机制
Nov 30 Vue.js
微信小程序实现弹出菜单功能
Jun 12 #Javascript
微信小程序实现折叠与展开文章功能
Jun 12 #Javascript
微信小程序收藏功能的实现代码
Jun 12 #Javascript
记一次webpack3升级webpack4的踩坑经历
Jun 12 #Javascript
webpack4之SplitChunksPlugin使用指南
Jun 12 #Javascript
详解webpack4升级指南以及从webpack3.x迁移
Jun 12 #Javascript
webpack分离css单独打包的方法
Jun 12 #Javascript
You might like
PHP安装攻略:常见问题解答(一)
2006/10/09 PHP
php中定义网站根目录的常用方法
2010/08/08 PHP
php 操作数组(合并,拆分,追加,查找,删除等)
2012/07/20 PHP
关于svn冲突的解决方法
2013/06/21 PHP
php接口和抽象类使用示例详解
2014/03/02 PHP
ie 处理 gif动画 的onload 事件的一个 bug
2007/04/12 Javascript
一个报数游戏js版(约瑟夫环问题)
2010/08/05 Javascript
jquery.cookie用法详细解析
2013/12/18 Javascript
js确认删除对话框效果的示例代码
2014/02/20 Javascript
当滚动条滚动到页面底部自动加载增加内容的js代码
2014/05/13 Javascript
一个JavaScript操作元素定位元素的实例
2014/10/29 Javascript
js实现图片从左往右渐变切换效果的方法
2015/02/06 Javascript
jQuery Validate验证框架经典大全
2015/09/23 Javascript
jQuery form插件之ajaxForm()和ajaxSubmit()的可选参数项对象
2016/01/23 Javascript
javascript中递归的两种写法
2017/01/17 Javascript
vue-cli脚手架-bulid下的配置文件
2018/03/27 Javascript
vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用
2018/04/13 Javascript
vue .js绑定checkbox并获取、改变选中状态的实例
2018/08/24 Javascript
JS实现根据数组对象的某一属性排序操作示例
2019/01/14 Javascript
解决layui的table插件无法多层级获取json数据的问题
2019/09/19 Javascript
vue watch监控对象的简单方法示例
2021/01/07 Vue.js
python中安装Scrapy模块依赖包汇总
2017/07/02 Python
高质量Python代码编写的5个优化技巧
2017/11/16 Python
Python解析Excle文件中的数据方法
2018/10/23 Python
python三引号输出方法
2019/02/27 Python
python实现飞机大战项目
2020/03/11 Python
使用opencv识别图像红色区域,并输出红色区域中心点坐标
2020/06/02 Python
python为什么要安装到c盘
2020/07/20 Python
python中pivot()函数基础知识点
2021/01/03 Python
Python实现Excel自动分组合并单元格
2021/02/22 Python
Python的collections模块真的很好用
2021/03/01 Python
CSS3中的常用选择器使用示例整理
2016/06/13 HTML / CSS
论文指导教师评语
2014/04/28 职场文书
领导干部四风问题自我剖析材料
2014/09/25 职场文书
社区活动总结范文
2015/05/07 职场文书
python基础之停用词过滤详解
2021/04/21 Python