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实现前端页面的搜索功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • JS实现京东首页之页面顶部、Logo和搜索框功能

    JS实现京东首页之页面顶部、Logo和搜索框功能

    昨天我们主要讲了京东首页的基本布局,今天我们主要来逐步实现京东首页的页面顶部.Logo&搜索框.首先我们来看下我们今天将要实现的效果: 下面页面布局详细分析: 1.页面头部分三个部分依次实现:五角星图.收藏京东.右边文字部分(用列表实现): 其中当鼠标停放在手机京东上,手机背景图发生变化,变成红色带jd的图案:当鼠标悬停在客服服务上,出现下拉列表. 2.Logo&搜索框分四个部分实现:左边京东Logo.中间搜索框(上部:快速搜索:下部:热门搜索).右部我的京东&去购物车(步骤类似我

  • Java爬虫实现爬取京东上的手机搜索页面 HttpCliient+Jsoup

    Java爬虫实现爬取京东上的手机搜索页面 HttpCliient+Jsoup

    1.需求及配置 需求:爬取京东手机搜索页面的信息,记录各手机的名称,价格,评论数等,形成一个可用于实际分析的数据表格. 使用Maven项目,log4j记录日志,日志仅导出到控制台. Maven依赖如下(pom.xml) <dependencies> <dependency> <groupId>org.apache.httpcomponents</groupId> <artifactId>httpclient</artifactId>

  • javascript 多种搜索引擎集成的页面实现代码

    javascript 多种搜索引擎集成的页面实现代码

    - 输入一个关键词,鼠标点击后面的搜索引擎链接,即可进入到该引擎的页面 - 如果输入关键词后敲回车,则使用默认搜索引擎,而每选择新的搜索引擎,默认引擎也会随之改变 - 自动记忆上次使用的搜索引擎,后面添加* 源代码如下,使用了多种IE/FF的适应办法: 复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"&

  • JS 页面内容搜索，类似于 Ctrl+F功能的实现代码

    <html>  <META HTTP-EQUIV="Content-Type" content="text/html; charset=gb_2312-80">  <TITLE>WinWebMail</TITLE>  <script language="JavaScript">  <!--   function doZoom(size){      document.getElem

  • javascript 页面划词搜索JS

    基于Jquery修改,以下为全部脚本 复制代码 代码如下: //划词搜索 var GLS = {}; GLS.startObj = null; GLS.isdb = false; GLS.allow = true; GLS.isallow = function() { if (GLS.allow) { GLS.allow = false; alert('Google搜索已关闭'); } else { GLS.allow = true; alert('Google搜索已打开'); } }; GLS

  • 基于jquery的页面划词搜索JS

    基于jquery的页面划词搜索JS

    基于Jquery修改,以下为全部脚本 复制代码 代码如下: //划词搜索 var GLS = {}; GLS.startObj = null; GLS.isdb = false; GLS.allow = true; GLS.isallow = function() { if (GLS.allow) { GLS.allow = false; alert('Google搜索已关闭'); } else { GLS.allow = true; alert('Google搜索已打开'); } }; GLS

  • 可以用来搜索当前页面内容的js代码

    搜索页面内容 var NS4 = (document.layers); var IE4 = (document.all); // window to search. var win = window; var n = 0; function findInPage(str) { var txt, i, found; if (str == "") return false; if (NS4) { if (!win.find(str)) while(win.find(str, false,

  • JS实现静态页面搜索并高亮显示功能完整示例

    JS实现静态页面搜索并高亮显示功能完整示例

    本文实例讲述了JS实现静态页面搜索并高亮显示功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS搜索</title> </head> <body> <input id="key-word" class="k

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

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

    效果图如下所示: <input type="text" id="campus" class="layui-input" onkeyup="ck(this.value);" placeholder="请输入要查找的英语屋">//输入触发框 <div class="layui-input-block layui-form" id="cam" lay-fi

  • JS如何实现页面截屏功能实例代码

    "页面截屏"是前端经常遇到的需求,比如页面生成海报,弹窗图片分享等,因为浏览器没有原生的截图API,所以需要借助canvas来实现导出图片实现需求. 可行性方案 方案1: 将 DOM 改写成 canvas ,调用canvas的toBlob或者toDataURL方法即刻上传到七牛云或服务器 方案2: 使用第三方库html2canvas.js实现 canvas , 在不更改页面已有DOM的情况下优雅生产canvas 解决方案的选择 方案1:需要手动计算每个DOM元素的Computed St

  • JavaScript利用img实现前端页面埋点功能

    JavaScript利用img实现前端页面埋点功能

    目录 数据类型 技术方案 如何设计 完整代码 总结 做数据分析的时候,可能会遇到一个问题:如何获取足量的有效数据.简单记录用户登录IP肯定是不能满足要求的,这个时候就需要我们在前端页面埋点,也就是数据采集点.如何来实现一个前端埋点功能,本文就带你上手试试. 数据类型 首先,我们需要明确埋点需要哪些数据,这个和具体的业务需求有关.但是我们设计的时候,还是应该尽量考虑: pv:页面访问量 uv:用户访问量 自定义事件 页面性能加载数据 报错信息 埋点数据范围清晰了,那么怎么来实现埋点呢? 技术方案

  • JS实现表格数据各种搜索功能的方法

    本文实例讲述了JS实现表格数据各种搜索功能.可忽略大小写,模糊搜索,多关键搜索.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html> <html>  <head>   <meta charset="utf-8">   <title></title>   <script type="text/javascript">    window.onl

  • js实现百度淘宝搜索功能

    js实现百度淘宝搜索功能

    本文实例为大家分享了js实现百度淘宝搜索功能的具体代码,供大家参考,具体内容如下 由于没有后台数据,用数组模拟一下后台返回的数据 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=

  • 微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能)

    上效果图: 一:搜索框功能实现 1.在首页做一个搜索框的样式并实现跳转到搜索页面 <view class='page_row' bindtap="suo"> <view class="search"> <view class="df search_arr"> <icon class="searchcion" size='20' type='search'></icon>

  • JavaScript前端页面搜索功能案例【基于jQuery】

    JavaScript前端页面搜索功能案例【基于jQuery】

    本文实例讲述了JavaScript前端页面搜索功能.分享给大家供大家参考,具体如下: 今天给大家分享一篇关于前端页面搜索的案例,有了这个案例,在表格数据中可以进行快速查找,比在浏览器中使用ctrl+F体验比较好. 效果图: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>页面搜索实例</title>

  • 浅析基于WEB前端页面的页面内容搜索的实现思路

    在网页做查询以前都是这么做的 表单获取关键字 –> 传入后端SQL语句处理 –>数据返回给前端显示 今天突然到游览器的Ctrl+F的这个功能怎么实现的,把数据一次放在页面上,然后在用JS 去匹配页面的内容. 不管怎么样,现在完成了功能,然后在做优化 复制代码 代码如下: $(function(){     var UserArray = new Array();     var TurenameArray = new Array();     var table = $("table

  • JavaScript实现前端实时搜索功能

    JavaScript实现前端实时搜索功能

    大部分页面都具备搜索功能.而作为前端,我们的目的只是将用户输入的内容返回给后台而后呈现反馈数据给用户,具体实现如下: 1.基本布局: <div class="searcher"> <p class="searcher-main"> <i><img src="img/icon/icon-search-map.png"/></i> <input class="searcher

  • PHP 结合 Boostrap 结合 js 实现学生列表删除编辑及搜索功能

    这个自己的小项目要先告一段落了.可能还有许多bug.请见谅 删除学生功能 PHP: // 这里是通过前端代码HTML中的 url 传过来的,用 $_GET 来获取(相关HTML代码可以看一下到主页看一下前几条博客) if (empty($_GET['num'])) exit('<h1>找不到您要删除的学生的学号</h1>'); $num = $_GET['num']; $connection = mysqli_connect('localhost', 'root', '密码', '

随机推荐