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 相关文章推荐
JQUERY操作JSON实例代码
Feb 09 Javascript
基于jquery实现的上传图片及图片大小验证、图片预览效果代码
Apr 12 Javascript
js获取GridView中行数据的两种方法 分享
Jul 13 Javascript
可以浮动某个物体的jquery控件用法实例
Jul 24 Javascript
JS实现灵巧的下拉导航效果代码
Aug 25 Javascript
jquery及js实现动态加载js文件的方法
Jan 21 Javascript
jquery实现简单Tab切换菜单效果
Jul 17 Javascript
基于jQuery实现滚动切换效果
Dec 02 Javascript
详解vue如何使用rules对表单字段进行校验
Oct 17 Javascript
详解Vue SSR( Vue2 + Koa2 + Webpack4)配置指南
Nov 13 Javascript
微信小程序自定义底部弹出框动画
Nov 18 Javascript
jQuery实现tab栏切换效果
Dec 22 jQuery
微信小程序实现弹出菜单功能
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面向接口编程 耦合设计模式 简单范例
2011/03/23 PHP
PHP使用内置函数file_put_contents写入文件及追加内容的方法
2015/12/07 PHP
ThinkPHP3.2.3框架实现执行原生SQL语句的方法示例
2019/04/03 PHP
JQuery与iframe交互实现代码
2009/12/24 Javascript
ajax异步刷新实现更新数据库
2012/12/03 Javascript
解析dom中的children对象数组元素firstChild,lastChild的使用
2013/07/10 Javascript
sliderToggle在写jquery的计时器setTimeouter中不生效
2014/05/26 Javascript
js图片滚动效果时间可随意设定当鼠标移上去时停止
2014/06/26 Javascript
jQuery的end()方法使用详解
2015/07/15 Javascript
javascript中判断json的方法总结
2015/08/27 Javascript
jquery可定制的在线UEditor编辑器
2015/11/17 Javascript
jQuery绑定事件-多种实现方式总结
2016/05/09 Javascript
第一次接触神奇的Bootstrap基础排版
2016/07/26 Javascript
Javascript单例模式的介绍和实例
2016/10/08 Javascript
完美解决js传递参数中加号和&amp;号自动改变的方法
2016/10/11 Javascript
利用yarn实现一个webpack+react种子
2016/10/25 Javascript
JS基于递归算法实现1,2,3,4,5,6,7,8,9倒序放入数组中的方法
2017/01/03 Javascript
JavaScript数据结构学习之数组、栈与队列
2017/05/02 Javascript
基于JavaScript实现报警器提示音效果
2017/10/27 Javascript
jQuery 防止相同的事件快速重复触发方法
2018/02/08 jQuery
JS编写兼容IE6,7,8浏览器无缝自动轮播
2018/10/12 Javascript
jQuery实现的点击图片居中放大缩小功能示例
2019/01/16 jQuery
js中数组对象去重的两种方法
2019/01/18 Javascript
vue实现可视化可拖放的自定义表单的示例代码
2019/03/20 Javascript
Vue.js自定义指令学习使用详解
2019/10/19 Javascript
[02:43]DOTA2英雄基础教程 圣堂刺客
2013/12/09 DOTA
Python存取XML的常见方法实例分析
2017/03/21 Python
python matplotlib坐标轴设置的方法
2017/12/05 Python
Python快速查找list中相同部分的方法
2018/06/27 Python
pytorch 转换矩阵的维数位置方法
2018/12/08 Python
基于python实现雪花算法过程详解
2019/11/16 Python
Tensorflow训练模型越来越慢的2种解决方案
2020/02/07 Python
python GUI库图形界面开发之PyQt5控件数据拖曳Drag与Drop详细使用方法与实例
2020/02/27 Python
碧欧泉美国官网:Biotherm美国
2016/08/31 全球购物
2015年控辍保学工作总结
2015/05/18 职场文书
golang日志包logger的用法详解
2021/05/05 Golang