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

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

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

 
//省略部分调用关系
this.highSearch = function () {
document.getElementById('highSearchObj').disabled=true; 
var highSearchHtml = '
 
包含关键词
 
不包含关键词
检索范围

本院认为
审理经过
原告诉称
被告辩称






全部
判决
裁定
通知
决定
调解

全部
一审
二审
再审

-
案由
法院



';
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="
@("+st+")("+kywds+"-"+nokywds+")
";
$("#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'];
html.push('');
html.push('');
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' );
},

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