The layui+jfinal template in html realizes the front-end search function

 < input type ="text" id ="campus" class ="layui-input" onkeyup ="ck(this.value);" placeholder ="Please enter the English house you are looking for" > //input trigger box

 < div class ="layui-input-block layui-form" id ="cam" lay-filter ="cam" > This is the container of the campus to be displayed, and this page is rendered </ div >
//template data
//Because this block uses the statement of layui and the statement of jfinal, so you need to use the # of layui # with jfinal # to make layui output as a normal string
< script type ="text/html" id ="searchText" > 
        # for (x : CampusKit.findListByAccount(loginAccount)) // jfinal statement, loop 

        {{#( " # " )   if (isContains( " #(x .campusName) " ,d.val)){ }} // The combination of layui's statement and jfinal's statement is used here, #(x.campusName) jfinal's statement, {{#("#") if(isContains(" #(x.campusName)",d.val)){ }} The d.val in if uses the layui statement, so it can be written directly, usually {{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>

//whether str string contains substr string
function isContains(str, substr) {
    return str.indexOf(substr) >= 0;
}

//Writing of layui template
var getTpl = searchText.innerHTML;//Write it outside the js method so that it is only loaded once, not every time, and the speed is fast
/* Front-end page search */
 function ck(campusName){
    //render template
    layui.laytpl(getTpl).render({"val":campusName}, //json值
            function(html){
        $("#cam").html(html);//jquery loads the template into the div id is cam < div id = "cam" ></ div >
        console.log(html);
        layui.form.render(null,"cam"); ​​//Update the page in this container
    });
      
}

Record your learning journey...

The big brother is really awesome. All kinds of...