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

下面是高级检索的核心功能代码，我使用的是纯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' );
},

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