Maison > interface Web > js tutoriel > JS effectue une recherche globale sur la page front-end

JS effectue une recherche globale sur la page front-end

php中世界最好的语言
Libérer: 2018-06-13 13:48:33
original
4645 Les gens l'ont consulté

Cette fois je vous amène JS pour faire une recherche globale sur la page front-end Quelles sont les précautions à prendre pour utiliser JS pour faire une recherche globale sur la page front-end Voici un cas pratique, prenons un. regarder.

Le rendu est le suivant :

<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>
Copier après la connexion
//模板数据 
//因为这块用到了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"); //更新这个容器中的页面 
  }); 
}
Copier après la connexion

Je crois que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour en savoir plus. des choses passionnantes, veuillez faire attention à php Autres articles connexes sur le site chinois !

Lecture recommandée :

Utilisation de la fonction apply+Math.max()

webpack d'installation et de configuration de vue-cli

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal