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 相关文章推荐
window.onload 加载完毕的问题及解决方案(下)
Jul 09 Javascript
用js实现的自定义的对话框的实现代码
Mar 21 Javascript
Javascript自定义函数判断网站访问类型是PC还是移动终端
Jan 10 Javascript
javascript常用方法汇总
Dec 02 Javascript
js实现获取div坐标的方法
Nov 16 Javascript
图片旋转、鼠标滚轮缩放、镜像、切换图片js代码
Dec 13 Javascript
jquery中live()方法和bind()方法区别分析
Jun 23 Javascript
AngularJS基础 ng-include 指令简单示例
Aug 01 Javascript
如何提高数据访问速度
Dec 26 Javascript
使用jquery给新生的th绑定hover事件的实例
Feb 10 Javascript
JavaScript数据结构中栈的应用之表达式求值问题详解
Apr 11 Javascript
jQuery插件imgAreaSelect基础讲解
May 26 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
什么是短波收听SWL
2021/03/01 无线电
PHP中file_exists与is_file,is_dir的区别介绍
2012/09/12 PHP
destoon调用企业会员公司形象图片的实现方法
2014/08/21 PHP
浅谈socket同步和异步、阻塞和非阻塞、I/O模型
2016/12/15 PHP
基于jquery的实现简单的表格中增加或删除下一行
2010/08/01 Javascript
从零开始学习jQuery (二) 万能的选择器
2010/10/01 Javascript
JavaScript 学习笔记之变量及其作用域
2015/01/14 Javascript
jQuery实现dialog设置focus焦点的方法
2015/06/10 Javascript
微信小程序 数组(增,删,改,查)等操作实例详解
2017/01/05 Javascript
JS实现提交表单前的数字及邮箱校检功能
2017/11/13 Javascript
nodejs中用npm初始化来创建package.json的实例讲解
2018/10/10 NodeJs
Angular使用ControlValueAccessor创建自定义表单控件
2019/03/08 Javascript
JS实现点击生成UUID的方法完整实例【基于jQuery】
2019/06/12 jQuery
如何使用Node.js爬取任意网页资源并输出PDF文件到本地
2019/06/17 Javascript
jquery图片预览插件实现方法详解
2019/07/18 jQuery
Layui数据表格判断编辑输入的值,是否为我需要的类型详解
2019/10/26 Javascript
JQuery+drag.js上传图片并且实现图片拖曳
2020/11/18 jQuery
[42:22]DOTA2上海特级锦标赛C组小组赛#1 OG VS Archon第一局
2016/02/27 DOTA
用python分割TXT文件成4K的TXT文件
2009/05/23 Python
Python中isnumeric()方法的使用简介
2015/05/19 Python
使用Python发送各种形式的邮件的方法汇总
2015/11/09 Python
使用rst2pdf实现将sphinx生成PDF
2016/06/07 Python
利用pyinstaller将py文件打包为exe的方法
2018/05/14 Python
Python unittest模块用法实例分析
2018/05/25 Python
YUV转为jpg图像的实现
2019/12/09 Python
Python和Sublime整合过程图示
2019/12/25 Python
python numpy库linspace相同间隔采样的实现
2020/02/25 Python
使用canvas一步步实现图片打码功能的方法
2019/06/17 HTML / CSS
加拿大大码女装购物网站:Penningtons
2020/12/26 全球购物
应届毕业生应聘自荐信
2013/12/07 职场文书
会计电算化专业毕业生求职信范文
2013/12/10 职场文书
2015年小学语文工作总结
2015/05/25 职场文书
解决golang结构体tag编译错误的问题
2021/05/02 Golang
Python+Tkinter打造签名设计工具
2022/04/01 Python
Python OpenCV之常用滤波器使用详解
2022/04/07 Python
Java的Object类的九种方法
2022/04/13 Java/Android