你的位置:首页 > Java教程

[Java教程]js实现类似于百度学术的高级检索功能

百度学术http://xueshu.baidu.com/高级检索是通过前台生成后台内部高级语法来实现高级检索的,可以通过前台js做字符串拼接传给后台实现,难度不大:

下面是高级检索的核心功能代码,我使用的是纯js实现,并未使用jquery:

1 <p class="fl srh-btn">2       <input type="submit" class="srh-submit" style="height:43px" value="高级搜索" id="highSearchObj"/>3     </p>

//省略部分调用关系

 1   this.highSearch = function () { 2     document.getElementById('highSearchObj').disabled=true;  3     var highSearchHtml = '<div ><div ><ul> \ 4             <li><span id="tabReg" >包含关键词</span><input id="kywds" value=""></li> \ 5             <li><span id="tabReg" >不包含关键词</span><input id="nokywds" value=""></li>\ 6             <li><span id="tabReg" >检索范围</span>\ 7             <select id="st">\ 8             <option value ="byrw">本院认为</option>\ 9             <option value ="sljg">审理经过</option>\10             <option value="ygsc">原告诉称</option>\11             <option value="bgbc">被告辩称</option>\12             </select></li>\13             </ul>\14       <input id="conditionObj" type="submit" value="新增一组条件"></input>\15             <hr>\16       <div >\17       <select id="type">\18        <option value ="all">全部</option>\19        <option value ="pj">判决</option>\20        <option value ="cd">裁定</option>\21        <option value="tz">通知</option>\22        <option value="jd">决定</option>\23        <option value="tj">调解</option>\24       </select><select id="round">\25        <option value ="all">全部</option>\26        <option value ="one">一审</option>\27        <option value ="two">二审</option>\28        <option value="again">再审</option>\29       </select>\30 <input id="bg" value="2010">-<input id="end" value="2016">\31 <ul><li><span id="tabReg" >案由</span><input id="ay" value=""></input></li>\32   <li><span id="tabReg" >法院</span><input id="fy" value=""></input></li>\33 </ul></div>\34       <ul id="sql"></ul>\35       <input id="submitHighSearchObj" type="submit" value="提交高级搜索"></input>\36       </div></div>';37     this.highSearchObj = $(highSearchHtml);38     $("body").append(this.highSearchObj);39     $("#conditionObj").click(function(){40       var kywds="\""+document.getElementById("kywds").value.split(" ").join("\"&\"")+"\"";41       var st=document.getElementById("st").value;42       var nokywds="\""+document.getElementById("nokywds").value.split(" ").join("\"|\"")+"\"";43       var sql="<li name=\"highTag\">@("+st+")("+kywds+"-"+nokywds+")</li>";44       $("#sql").append(sql);45     })46     $("#submitHighSearchObj").click(function(){47       var highTags=document.getElementsByName("highTag");48       var tags="";49       var filters="";50       var round=document.getElementById("round").value;51       var type=document.getElementById("type").value;52       var reason=document.getElementById("ay").value.split(" ").join(",");53       var court=document.getElementById("fy").value.split(" ").join(",");54       var begin=document.getElementById("bg").value;55       var end=document.getElementById("end").value;56       if(highTags.length==0){57         var kywds="\""+document.getElementById("kywds").value.split(" ").join("\"&\"")+"\"";58         var st=document.getElementById("st").value;59         var nokywds="\""+document.getElementById("nokywds").value.split(" ").join("\"|\"")+"\"";60         tags="@("+st+")("+kywds+"-"+nokywds+")";        61       } else {62         for(i=0;i<highTags.length;i++){63           tags+=highTags[i].innerHTML;64         }    65       }66       if(round !="all") {67         filters+=" round:"+round+";";68       }69       if(type !="all") {70         filters+=" type:"+type+";";71       }72       if(reason !="") {73         filters+=" reason:"+reason+";";74       }75       if(court !="") {76         filters+=" court:"+court+";";77       }78       if(begin !="" && end !="") {79         filters+=" year:";80         while(begin<=end) {81           filters=filters+begin+",";82           begin++;83         }84       }85       if(filters !="") {86         tags="magic:"+tags+";filter:"+filters;87       }88       var formObj = $('<form id="form" action="/search" target="_self" method="get"></form>');89       var html = ['<input type="hidden" name="type" value="1">'];90       html.push('<input type="hidden" name="keyword" value="' + encodeURIComponent(tags) + '">');91       html.push('<input type="hidden" name="TypeKey" value="' + encodeURIComponent(tags) +'">');92       formObj.html(html.join(","));93       $("body").append(formObj);94       formObj.submit();95     });96 //    $("#ay").keyup(function(e){97 //    });98   }

第3行到第36行主要是弹窗的HTML代码。

37,38行使用了js中常用的最简单的在页面中动态修改前台的方法。

第39行和第46行均为对新增代码的动作处理,用于提交条件和子条件。

在第46行的函数里面,做了对字符串的拼接处理。

在第88行到第96行,实现了通过隐藏表单提交查询条件的js+html调用。

 

这样的处理方法,在富文本编辑脚本中也可以使用。