基于JavaScript实现类似于百度学术高级检索功能

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

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

<p> <input type="submit" value="高级搜索"/> </p> //省略部分调用关系 this.highSearch = function () { document.getElementById('highSearchObj').disabled=true; var highSearchHtml = '<div><div><ul> \ <li><span>包含关键词</span><input value=""></li> \ <li><span>不包含关键词</span><input value=""></li>\ <li><span>检索范围</span>\ <select>\ <option value ="byrw">本院认为</option>\ <option value ="sljg">审理经过</option>\ <option value="ygsc">原告诉称</option>\ <option value="bgbc">被告辩称</option>\ </select></li>\ </ul>\ <input type="submit" value="新增一组条件"></input>\ <hr>\ <div>\ <select>\ <option value ="all">全部</option>\ <option value ="pj">判决</option>\ <option value ="cd">裁定</option>\ <option value="tz">通知</option>\ <option value="jd">决定</option>\ <option value="tj">调解</option>\ </select><select>\ <option value ="all">全部</option>\ <option value ="one">一审</option>\ <option value ="two">二审</option>\ <option value="again">再审</option>\ </select>\ <input value="">-<input value="">\ <ul><li><span>案由</span><input value=""></input></li>\ <li><span>法院</span><input value=""></input></li>\ </ul></div>\ <ul></ul>\ <input type="submit" value="提交高级搜索"></input>\ </div></div>'; this.highSearchObj = $(highSearchHtml); $("body").append(this.highSearchObj); $("#conditionObj").click(function(){ var kywds="\""+document.getElementById("kywds").value.split(" ").join("\"&\"")+"\""; var st=document.getElementById("st").value; var nokywds="\""+document.getElementById("nokywds").value.split(" ").join("\"|\"")+"\""; var sql="<li name=\"highTag\">@("+st+")("+kywds+"-"+nokywds+")</li>"; $("#sql").append(sql); }) $("#submitHighSearchObj").click(function(){ var highTags=document.getElementsByName("highTag"); var tags=""; var filters=""; var round=document.getElementById("round").value; var type=document.getElementById("type").value; var reason=document.getElementById("ay").value.split(" ").join(","); var court=document.getElementById("fy").value.split(" ").join(","); var begin=document.getElementById("bg").value; var end=document.getElementById("end").value; if(highTags.length==){ var kywds="\""+document.getElementById("kywds").value.split(" ").join("\"&\"")+"\""; var st=document.getElementById("st").value; var nokywds="\""+document.getElementById("nokywds").value.split(" ").join("\"|\"")+"\""; tags="@("+st+")("+kywds+"-"+nokywds+")"; } else { for(i=;i<highTags.length;i++){ tags+=highTags[i].innerHTML; } } if(round !="all") { filters+=" round:"+round+";"; } if(type !="all") { filters+=" type:"+type+";"; } if(reason !="") { filters+=" reason:"+reason+";"; } if(court !="") { filters+=" court:"+court+";"; } if(begin !="" && end !="") { filters+=" year:"; while(begin<=end) { filters=filters+begin+","; begin++; } } if(filters !="") { tags="magic:"+tags+";filter:"+filters; } var formObj = $('<form action="/search" target="_self" method="get"></form>'); var html = ['<input type="hidden" value="">']; html.push('<input type="hidden" value="' + encodeURIComponent(tags) + '">'); html.push('<input type="hidden" value="' + encodeURIComponent(tags) +'">'); formObj.html(html.join(",")); $("body").append(formObj); formObj.submit(); }); // $("#ay").keyup(function(e){ // }); }

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

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

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

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

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

jquery js实现高级条件检索功能中检索条件切换

基本思路:

1.HTML:

使用table展示所有检索条件,使用input控件展示每一个检索条件,定义两种CSS类样式,用以区分检索条件的选中与未选中状态

2.JS实现:

为未选中的input绑定点击事件,可通过绑定未选中的样式类来实现,代码实现

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgyxxy.html