基于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 相关文章推荐
JavaScript 存在陷阱 删除某一区域所有节点
May 10 Javascript
Jquery UI震动效果实现原理及步骤
Feb 04 Javascript
jquery处理json数据实例分析
Jun 03 Javascript
使用javascript实现判断当前浏览器
Apr 14 Javascript
AngularJS仿苹果滑屏删除控件
Jan 18 Javascript
JS模拟bootstrap下拉菜单效果实例
Jun 17 Javascript
javascript this详细介绍
Sep 19 Javascript
文件上传插件SWFUpload的使用指南
Nov 29 Javascript
angularjs2中父子组件的数据传递的实例代码
Jul 05 Javascript
详解在React里使用&quot;Vuex&quot;
Apr 02 Javascript
vue - props 声明数组和对象操作
Jul 30 Javascript
关于element的表单组件整理笔记
Feb 05 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
php中$_SERVER[PHP_SELF] 和 $_SERVER[SCRIPT_NAME]之间的区别
2009/09/05 PHP
php数组合并array_merge()函数使用注意事项
2014/06/19 PHP
php编程实现简单的网页版计算器功能示例
2017/04/26 PHP
PHP让网站移动访问更加友好方法
2019/02/14 PHP
jQuery ReferenceError: $ is not defined 错误的处理办法
2013/05/10 Javascript
鼠标悬停小图标显示大图标
2016/01/22 Javascript
表单元素值获取方式js及java方式的简单实例
2016/10/15 Javascript
从零开始学习Node.js系列教程五:服务器监听方法示例
2017/04/13 Javascript
iview给radio按钮组件加点击事件的实例
2017/09/30 Javascript
angular实现input输入监听的示例
2018/08/31 Javascript
Vue瀑布流插件的使用示例
2018/09/19 Javascript
详解Vue 动态组件与全局事件绑定总结
2018/11/11 Javascript
vue canvas绘制矩形并解决由clearRec带来的闪屏问题
2019/09/02 Javascript
Electron 调用命令行(cmd)
2019/09/23 Javascript
Jquery属性的获取/设置及样式添加/删除操作技巧分析
2019/12/23 jQuery
深入浅析JavaScript中的in关键字和for-in循环
2020/04/20 Javascript
JS倒计时两种实现方式代码实例
2020/07/27 Javascript
[01:12]快闪回顾DOTA2亚洲邀请赛(DAC) 静候2018新征程开启
2018/03/11 DOTA
PYTHON 中使用 GLOBAL引发的一系列问题
2016/10/12 Python
python与php实现分割文件代码
2017/03/06 Python
Python基于Flask框架配置依赖包信息的项目迁移部署
2018/03/02 Python
Python 访问限制 private public的详细介绍
2018/10/16 Python
python重试装饰器的简单实现方法
2019/01/31 Python
python学习--使用QQ邮箱发送邮件代码实例
2019/04/16 Python
Pytorch 实现数据集自定义读取
2020/01/18 Python
Keras 数据增强ImageDataGenerator多输入多输出实例
2020/07/03 Python
python开发入门——列表生成式
2020/09/03 Python
CSS3圆角边框和边界图片效果实例
2016/07/01 HTML / CSS
阿迪达斯西班牙官方网站:adidas西班牙
2016/07/21 全球购物
波兰灯具、照明和LED购物网站:Lampy.pl
2019/03/11 全球购物
董事长助理工作职责
2014/06/08 职场文书
2014年超市工作总结
2014/11/19 职场文书
关于艺术节的开幕致辞
2016/03/04 职场文书
sql server删除前1000行数据的方法实例
2021/08/30 SQL Server
GO语言字符串处理函数之处理Strings包
2022/04/14 Golang
HTML5之高度塌陷问题的解决
2022/06/01 HTML / CSS