Home > Web Front-end > JS Tutorial > body text

JS makes a global search on the front-end page

php中世界最好的语言
Release: 2018-06-13 13:48:33
Original
4518 people have browsed it

This time I will bring you JS to make a global search on the front-end page. What are the precautions for using JS to make a global search on the front-end page? The following is a practical case, let's take a look.

The rendering is as follows:

<input type="text" id="campus" class="layui-input" onkeyup="ck(this.value);" placeholder="请输入要查找的英语屋">//输入触发框 
<p class="layui-input-block layui-form" id="cam" lay-filter="cam">这个是要显示的校区的容器,渲染的就是这个页面</p>
Copy after login
//模板数据 
//因为这块用到了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=&#39;checkbox&#39; value="#(x.id)" name=&#39;campus&#39;  
        #(sysAccountCampusIds.contains(x.id.toString()) ? &#39;checked="checked"&#39;:&#39;&#39;) 
        title="#(x.campusName)" id=&#39;campusBox#(x.id)&#39;> 
    #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=&#39;checkbox&#39; value="#(x.id)" name=&#39;campus&#39;  
        #(sysAccountCampusIds.contains(x.id.toString()) ? &#39;checked="checked"&#39;:&#39;&#39;) 
        title="#(x.campusName)" id=&#39;campusBox#(x.id)&#39;> 
    {{#("#") } }} 
    #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把模板加载到p  id是cam中<p id="cam"></p> 
    console.log(html); 
    layui.form.render(null,"cam"); //更新这个容器中的页面 
  }); 
}
Copy after login

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website !

Recommended reading:

apply Math.max() function using

vue-cli installation and configuration webpack

The above is the detailed content of JS makes a global search on the front-end page. For more information, please follow other related articles on the PHP Chinese website!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!