JavaScript_javascript 기술을 기반으로 Baidu Academic과 유사한 고급 검색 기능 구현

Baidu Academichttp://xueshu.baidu.com/고급 검색은 백엔드에서 내부 고급 구문을 생성하는 프런트엔드를 통해 이루어집니다. 프런트엔드에서 문자열 접합을 통해 구현할 수 있습니다. -end 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:

테이블을 사용하여 모든 검색 조건을 표시하고, 입력 컨트롤을 사용하여 각 검색 조건을 표시하며, 두 개의 CSS 클래스 스타일을 정의하여 검색 조건의 선택 상태와 선택되지 않은 상태를 구분합니다

2.JS 구현:

선택되지 않은 입력에 대한 클릭 이벤트 바인딩은 선택되지 않은 스타일 클래스 바인딩, 코드 구현을 통해 달성할 수 있습니다

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

이 시점에서 모든 검색 조건의 자동 전환이 이루어집니다