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

时间:2021-05-25

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

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

<p class="fl srh-btn"><input type="submit" class="srh-submit" style="height:px" value="高级搜索" id="highSearchObj"/></p> //省略部分调用关系this.highSearch = function () {document.getElementById('highSearchObj').disabled=true; var highSearchHtml = '<div class="highSearch" style="display:block"><div class="highMsg"><ul> \<li><span id="tabReg" class="tab">包含关键词</span><input id="kywds" value=""></li> \<li><span id="tabReg" class="tab">不包含关键词</span><input id="nokywds" value=""></li>\<li><span id="tabReg" class="tab">检索范围</span>\<select id="st">\<option value ="byrw">本院认为</option>\<option value ="sljg">审理经过</option>\<option value="ygsc">原告诉称</option>\<option value="bgbc">被告辩称</option>\</select></li>\</ul>\<input id="conditionObj" type="submit" value="新增一组条件"></input>\<hr>\<div class="fit">\<select id="type">\<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 id="round">\<option value ="all">全部</option>\<option value ="one">一审</option>\<option value ="two">二审</option>\<option value="again">再审</option>\</select>\<input id="bg" value="">-<input id="end" value="">\<ul><li><span id="tabReg" class="tab">案由</span><input id="ay" value=""></input></li>\<li><span id="tabReg" class="tab">法院</span><input id="fy" value=""></input></li>\</ul></div>\<ul id="sql"></ul>\<input id="submitHighSearchObj" 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 id="form" action="/search" target="_self" method="get"></form>');var html = ['<input type="hidden" name="type" value="">'];html.push('<input type="hidden" name="keyword" value="' + encodeURIComponent(tags) + '">');html.push('<input type="hidden" name="TypeKey" 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绑定点击事件,可通过绑定未选中的样式类来实现,代码实现

function (event) {//event为点击事件$(event.target).parent().find( '.条件input-selected' ).toggleClass('条件input-selected' ).toggleClass( '条件input-default');$(event.target).toggleClass( '条件input-selected' ).toggleClass('条件input-default' );},

此时就实现了所有检索条件的自动切换

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章