這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)類似于百度學(xué)術(shù)高級(jí)檢索功能 的相關(guān)資料,需要的朋友可以參考下
下面是高級(jí)檢索的核心功能代碼，我使用的是純js實(shí)現(xiàn)，并未使用jquery：
<p>
<input type="submit" value="高級(jí)搜索" id="highSearchObj"/>
</p>
//省略部分調(diào)用關(guān)系
this.highSearch = function () {
document.getElementById('highSearchObj').disabled=true;
var highSearchHtml = '<div><div><ul> \
<li><span id="tabReg">包含關(guān)鍵詞</span><input id="kywds" value=""></li> \
<li><span id="tabReg">不包含關(guān)鍵詞</span><input id="nokywds" value=""></li>\
<li><span id="tabReg">檢索范圍</span>\
<select id="st">\
<option value ="byrw">本院認(rèn)為</option>\
<option value ="sljg">審理經(jīng)過</option>\
<option value="ygsc">原告訴稱</option>\
<option value="bgbc">被告辯稱</option>\
</select></li>\
</ul>\
<input id="conditionObj" type="submit" value="新增一組條件"></input>\
<hr>\
<div>\
<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">調(diào)解</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">案由</span><input id="ay" value=""></input></li>\
<li><span id="tabReg">法院</span><input id="fy" value=""></input></li>\
</ul></div>\
<ul id="sql"></ul>\
<input id="submitHighSearchObj" type="submit" value="提交高級(jí)搜索"></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中常用的最簡(jiǎn)單的在頁面中動(dòng)態(tài)修改前臺(tái)的方法。
第39行和第46行均為對(duì)新增代碼的動(dòng)作處理，用于提交條件和子條件。
在第46行的函數(shù)里面，做了對(duì)字符串的拼接處理。
在第88行到第96行，實(shí)現(xiàn)了通過隱藏表單提交查詢條件的js+html調(diào)用。
jquery js實(shí)現(xiàn)高級(jí)條件檢索功能中檢索條件切換
基本思路：
1.HTML：
使用table展示所有檢索條件，使用input控件展示每一個(gè)檢索條件，定義兩種CSS類樣式，用以區(qū)分檢索條件的選中與未選中狀態(tài)
2.JS實(shí)現(xiàn)：
為未選中的input綁定點(diǎn)擊事件，可通過綁定未選中的樣式類來實(shí)現(xiàn)，代碼實(shí)現(xiàn)
function (event) {//event為點(diǎn)擊事件
$(event.target).parent().find( '.條件input-selected' ).toggleClass('條件input-selected' ).toggleClass( '條件input-default');
$(event.target).toggleClass( '條件input-selected' ).toggleClass('條件input-default' );
},
此時(shí)就實(shí)現(xiàn)了所有檢索條件的自動(dòng)切換