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

效果图如下：

输入类型=' text ' id=' campus ' class=' layui-input ' onkeyup=' CK(this . value)；'占位符='请输入英文房间查找'//输入触发框div class=' layui-input-block layui-form ' id=' cam ' lay-filter=' cam '，这是要显示的学区的容器。呈现的是这个页面/div //模板数据//，因为这个片段使用了layui语句和jfinal语句。因此，需要使用layui的#和jfinal的#来使layui输出脚本类型=' text/html' id=' searchtext' #为(x:campuskit。findlistbyaccount(log in account))//jfinal语句作为普通字符串。loop//在这里显示原来选中的数据，并显示选中的数据。如果没有显示，请保存。将这些数据默认为# if(sysaccount campus。包含(x.id.tostring()))输入类型=' checkbox '值=' # (x.id)'名称=' campus ' #(sysaccount campus。包含(x.id.tostring(。checked=' checked ' ' : ' ')title=' #(x . campus name)' id=' campus box #(x . id)' # end//这里将layui和jfinal的语句组合在一起，使用了#(x.campusName) jfinal的语句。可以直接写{ { #(' # ')if(is contains(' #(x . campus name)'，d.val)) {}}中的D.val，因为if使用了layui的语句，该语句通常写成{ { d . val } } { #(' # ')d . val(){ } }输入类型=' checkbox ' value=' #(x . id)' name=' campus ' #(SysaccountCampuiss . contains(x . id . tostring())？check=' checked ' ' : ' ')title=' #(x . campus name)' id=' campus box #(x . id)' { { #(' # ')} } # end/script//str string contains substr string函数是contains (str，} //layui模板写成var getTpl=searchText.innerHTML//在js方法外写，所以只加载一次，不是每次都加载，速度快。/*搜索首页*/函数ck(campusName){ //Render模板layui . laytpl(getpl)。Render ({'val' : Campus Name}，//JSON值函数(html) {$ (') //jquery将模板加载到cam中的div id中。div id=' cam '/div console . log(html)；layui.form.render(null，‘cam’)；//更新此容器中的页面})；}摘要

以上就是JS实现前端页面搜索功能的介绍，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！