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


Posted in Javascript onMarch 02, 2016

百度学术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' );
},

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

Javascript 相关文章推荐
js常用代码段收集
Oct 28 Javascript
jquery 插件学习(四)
Aug 06 Javascript
javascript动态修改Li节点值的方法
Jan 20 Javascript
JavaScript自学笔记(必看篇)
Jun 23 Javascript
Js动态设置rem来实现移动端字体的自适应代码
Oct 14 Javascript
微信小程序 教程之小程序配置
Oct 17 Javascript
JavaScript中递归实现的方法及其区别
Sep 12 Javascript
详解封装基础的angular4的request请求方法
Jun 05 Javascript
微信小程序picker组件关于objectArray数据类型的绑定方法
Mar 13 Javascript
简述pm2常用命令集合及配置文件说明
May 30 Javascript
vux-scroller实现移动端上拉加载功能过程解析
Oct 08 Javascript
vue 根据选择条件显示指定参数的例子
Nov 09 Javascript
js密码强度实时检测代码
Mar 02 #Javascript
js+css实现回到顶部按钮(back to top)
Mar 02 #Javascript
Node.js中JavaScript操作MySQL的常用方法整理
Mar 01 #Javascript
通过node-mysql搭建Windows+Node.js+MySQL环境的教程
Mar 01 #Javascript
jquery自定义右键菜单、全选、不连续选择
Mar 01 #Javascript
Node.js的MongoDB驱动Mongoose基本使用教程
Mar 01 #Javascript
详解Wondows下Node.js使用MongoDB的环境配置
Mar 01 #Javascript
You might like
WINDOWS服务器安装多套PHP的另类解决方案
2006/10/09 PHP
PHP如何获取Cookie并实现模拟登录
2020/07/16 PHP
Javascript 布尔型分析
2008/12/22 Javascript
Javascript封装DOMContentLoaded事件实例
2014/06/12 Javascript
自己动手手写jQuery插件总结
2015/01/20 Javascript
javascript中函数作为参数调用的方法
2015/02/09 Javascript
JS运动基础框架实例分析
2015/03/03 Javascript
通过JS判断联网类型和连接状态的实现代码
2015/04/01 Javascript
jquery不常用方法汇总
2015/07/26 Javascript
JS实现点击复选框将按钮或文本框变为灰色不可用的方法
2015/08/11 Javascript
JS实现的N多简单无缝滚动代码(包含图文效果)
2015/11/06 Javascript
BootStrap的JS插件之轮播效果案例详解
2016/05/16 Javascript
谈一谈bootstrap响应式布局
2016/05/23 Javascript
JS多文件上传的实例代码
2017/01/11 Javascript
Node.js+Express+MySql实现用户登录注册功能
2017/07/10 Javascript
javascript for循环性能测试示例
2019/08/07 Javascript
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
2021/01/08 Vue.js
[53:20]2018DOTA2亚洲邀请赛 4.1 小组赛 A组加赛 VG vs OG
2018/04/03 DOTA
简介Django中内置的一些中间件
2015/07/24 Python
深入学习Python中的装饰器使用
2016/06/20 Python
python递归打印某个目录的内容(实例讲解)
2017/08/30 Python
Python实现一个服务器监听多个客户端请求
2018/04/12 Python
Python实现输入二叉树的先序和中序遍历,再输出后序遍历操作示例
2018/07/27 Python
python random从集合中随机选择元素的方法
2019/01/23 Python
Python利用itchat库向好友或者公众号发消息的实例
2019/02/21 Python
Python3实现将一维数组按标准长度分隔为二维数组
2019/11/29 Python
opencv 图像加法与图像融合的实现代码
2020/07/08 Python
活动总结模板
2014/05/09 职场文书
学校安全教育月活动总结
2014/07/07 职场文书
创优争先心得体会
2014/09/11 职场文书
省委召开党的群众路线教育实践活动总结大会报告
2014/10/21 职场文书
教师节慰问信
2015/02/15 职场文书
会计工作能力自我评价
2015/03/05 职场文书
交流会主持词
2015/07/02 职场文书
2015年教师节新闻稿
2015/07/17 职场文书
深入理解redis中multi与pipeline
2021/06/02 Redis