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 相关文章推荐
JS 分号引起的一段调试问题
Jun 18 Javascript
javascript学习笔记(九) js对象 设计模式
Jun 19 Javascript
jquery滚动特效集锦
Jun 03 Javascript
整理Javascript基础入门学习笔记
Nov 29 Javascript
js如何准确获取当前页面url网址信息
Sep 13 Javascript
canvas绘制环形进度条
Feb 23 Javascript
深入理解Vue 的条件渲染和列表渲染
Sep 01 Javascript
angular.extend方法的具体使用
Sep 14 Javascript
20行JS代码实现粘贴板复制功能
Feb 06 Javascript
简单说说如何使用vue-router插件的方法
Apr 08 Javascript
微信小程序实现搜索功能并跳转搜索结果页面
May 18 Javascript
Vue3新特性之在Composition API中使用CSS Modules
Jul 13 Javascript
微信小程序实现弹出菜单功能
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中把美国时间转为北京时间的自定义函数分享
2014/07/28 PHP
学习thinkphp5.0验证类使用方法
2017/11/16 PHP
PHPMAILER实现PHP发邮件功能
2018/04/18 PHP
Google Suggest ;-) 基于js的动态下拉菜单
2006/10/11 Javascript
jQuery EasyUI API 中文文档 - NumberSpinner数值微调器使用介绍
2011/10/21 Javascript
浅析JavaScript回调函数应用
2016/05/22 Javascript
js获取对象、数组的实际长度,元素实际个数的实现代码
2016/06/08 Javascript
Bootstrap媒体对象学习使用
2017/03/07 Javascript
Vue通过input筛选数据
2020/10/26 Javascript
vue.js 上传图片实例代码
2017/06/22 Javascript
vue.js整合mint-ui里的轮播图实例代码
2017/12/27 Javascript
VUE2 前端实现 静态二级省市联动选择select的示例
2018/02/09 Javascript
vue和webpack打包项目相对路径修改的方法
2018/06/15 Javascript
在iFrame子页面里实现模态框的方法
2018/08/17 Javascript
JS回调函数原理与用法详解【附PHP回调函数】
2019/07/20 Javascript
[02:05]2014DOTA2西雅图邀请赛 专访啸天mik夫妻档
2014/07/08 DOTA
[01:14:41]DOTA2-DPC中国联赛定级赛 iG vs Magma BO3第一场 1月8日
2021/03/11 DOTA
Python使用Flask框架获取当前查询参数的方法
2015/03/21 Python
使用Turtle画正螺旋线的方法
2017/09/22 Python
Python中的上下文管理器和with语句的使用
2018/04/17 Python
浅谈python中对于json写入txt文件的编码问题
2018/06/07 Python
python 实现分组求和与分组累加求和代码
2020/05/18 Python
python字符串拼接+和join的区别详解
2020/12/03 Python
Python 实现二叉查找树的示例代码
2020/12/21 Python
Python就将所有的英文单词首字母变成大写
2021/02/12 Python
AmazeUI框架搭建的方法步骤(图文)
2020/08/17 HTML / CSS
音乐教学随笔感言
2014/02/19 职场文书
电话客服专员岗位职责
2014/06/28 职场文书
党的群众路线对照检查材料范文
2014/09/24 职场文书
签订劳动合同通知书
2015/04/16 职场文书
go:垃圾回收GC触发条件详解
2021/04/24 Golang
「地球外少年少女」BD发售宣传CM公开
2022/03/21 日漫
HDFS免重启挂载新磁盘
2022/04/06 Servers
如何优化vue打包文件过大
2022/04/13 Vue.js
Android自定义双向滑动控件
2022/04/19 Java/Android
MySQL导致索引失效的几种情况
2022/06/25 MySQL