{{# var lang001 = {"ch": "协议搜索定位", "en": "App Search"}, lang002 = {"ch": "请输入协议名称关键字进行搜索", "en": "Keyword Search"}, lang003 = {"ch": "应用协议", "en": "Protocol"}, lang004 = {"ch": "未找到相关协议", "en": "No results found"}; }}  <style> .paui-page-app-position{font-family: 微软雅黑, Arial;} .paui-page-app-position hr{margin:5px 0px;} .paui-app-find-item{border-bottom: 1px solid #eeeeee; padding: 5px 0px;} .paui-app-find-item:hover{background-color: #F2F6F9;} .paui-app-position-search{width: 180px; margin: 100px auto; color: #999999;} </style>  <div class="layui-tab layui-tab-brief paui-page-app-position">     <ul class="layui-tab-title">         <li class="layui-this">{{ lang001[g_lang] || "协议搜索定位" }}</li>     </ul>     <div class="layui-tab-content">         <div class="layui-tab-item layui-show">             <form class="layui-form layui-form-pane paui-table-form" lay-filter="form_app_postion">                 <div class="layui-form-item paui-table-form-left">                     <div class="layui-input-inline" style="width: 220px;">                         <input class="layui-input" name="keyword" type="text" autocomplete="off"                         placeholder='{{ lang002[g_lang] || "请输入协议名称关键字进行搜索" }}' lay-affix="clear" lay-filter="clear_app_postion">                     </div>                     <div class="layui-input-inline" style="width:40px">                         <button class="layui-btn layui-btn-normal layui-btn-sm" lay-submit lay-filter="submit_app_postion">                             <i class="layui-icon layui-icon-search"></i>                         </button>                     </div>                 </div>             </form>             <div class="layui-row" id="paui-app-position-search" style="padding-bottom: 10px;">                 <div class="paui-app-position-search">{{ lang002[g_lang] || "请输入协议名称关键字进行搜索" }}</div>             </div>         </div>     </div> </div>  <script id="tpl_show_app_position" type="text/html">     <div class="layui-card">         <div class="layui-card-body">             {%# layui.each(d, function(index, elem){ %}                 <div class="layui-row paui-app-find-item">                     <div class="layui-inline" style="width: 20px; padding-left: 2px;">{% index + 1 %}.</div>                     <div class="layui-inline" style="padding: 0px 2px;">{{ lang003[g_lang] || "应用协议" }} -></div>                     {%# for(var i = elem.length - 1; i >= 0; i--) {                         var tag = i == 0 ? "" : "->";                     %}                         <div class="layui-inline" style="padding: 0px 2px;">                             <span class="abtn" app_position_event="btnevt_showapp" appname="{% elem[i].field%}" appcname="{% elem[i].title %}">                                 {% elem[i].title %}                             </span> {% tag %}                         </div>                     {%# } %}                 </div>             {%# }); %}         </div>     </div> </script>  <script> layui.use(function(){     var $ = layui.$,     form = layui.form,     util = layui.util,     patpl = layui.patpl;      var api = '/cgi-bin/proto/ajax_app';      var l_app = [];     var display_obj = $("#paui-app-position-search");     var TMPL = $("#tpl_show_app_position").html();       var get_parent_app = function(id, target){         layui.each(l_app, function(index, elem){             if(elem.id == id){                 target.push(elem);                 get_parent_app(elem.pid, target);             }         });     };       var app_local_search = function(){         var search = form.getValue('form_app_postion');          if(search.keyword == 0){             display_obj.html('<div class="paui-app-position-search">{{ lang002[g_lang] || "请输入协议名称关键字进行搜索" }}</div>');             return false;         };          var data = [];         layui.each(l_app, function(index, elem){             var tmp = [];             if(pa_str_find(elem.field, search.keyword) || pa_str_find(elem.title, search.keyword)){                 get_parent_app(elem.id, tmp);                 data.push(tmp);             }         });          if (data.length == 0)             display_obj.html('<div class="paui-app-position-search">{{ lang004[g_lang] || "未找到相关协议" }}</div>');         else {             patpl(TMPL).render(data, function(html){                 display_obj.html(html);                         });         }     };       /* 页面渲染 */     form.render();     pa_ajax({         url: api,         data: {'action': 'load_apptree', 'showany': 'no'},         success: function(json){             l_app = json.data;         }     });       /* 事件绑定 */     form.on('input-affix(clear_app_postion)', app_local_search);     form.on('submit(submit_app_postion)', function(obj){         app_local_search();         return false;     });      util.event('app_position_event', {         btnevt_showapp: function(){             var appname  = $(this).attr("appname");             var appcname = $(this).attr("appcname");             popupApp(appname, appcname);         }     }); }); </script>