基于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 相关文章推荐
defer属性导致引用JQuery的页面报“浏览器无法打开网站xxx,操作被中止”错误的解决方法
Apr 27 Javascript
浅析jquery的js图表组件highcharts
Mar 06 Javascript
JavaScript计算某一天是星期几的方法
Aug 05 Javascript
JavaScript实现下拉列表框数据增加、删除、上下排序的方法
Aug 11 Javascript
JavaScript深度复制(deep clone)的实现方法
Feb 19 Javascript
JavaScript禁止用户多次提交的两种方法
Jul 24 Javascript
基于vue2.0实现的级联选择器
Jun 09 Javascript
详解用vue编写弹出框组件
Jul 04 Javascript
基于input框覆盖掉数字英文的实例讲解
Jul 21 Javascript
浅谈react前后端同构渲染
Sep 20 Javascript
webpack多页面开发实践
Dec 18 Javascript
微信小程序实现发微博功能的示例代码
Jun 24 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屏蔽关键字实现方法
2016/11/17 PHP
强制设为首页代码
2006/06/19 Javascript
列表内容的选择
2006/06/30 Javascript
JavaScript 小型打飞机游戏实现原理说明
2010/10/28 Javascript
使用Mootools动态添加Css样式表代码,兼容各浏览器
2011/12/12 Javascript
Javascript操作cookie的函数代码
2012/10/03 Javascript
Javascript 按位与运算符 (&amp;)使用介绍
2014/02/04 Javascript
推荐25个超炫的jQuery网格插件
2014/11/28 Javascript
js实现鼠标划过给div加透明度的方法
2015/05/25 Javascript
JavaScript自定义分页样式
2017/01/17 Javascript
微信小程序 向左滑动删除功能的实现
2017/03/10 Javascript
浅谈关于axios和session的一些事
2017/07/13 Javascript
Vue单页式应用(Hash模式下)实现微信分享的实例
2017/07/21 Javascript
vue-router 实现导航守卫(路由卫士)的实例代码
2018/09/02 Javascript
angularjs中判断ng-repeat是否迭代完的实例
2018/09/12 Javascript
vue发送ajax请求详解
2018/10/09 Javascript
详解小程序input框失焦事件在提交事件前的处理
2019/05/05 Javascript
Vue中父子组件的值传递与方法传递
2020/09/28 Javascript
在ironpython中利用装饰器执行SQL操作的例子
2015/05/02 Python
Python中的random()方法的使用介绍
2015/05/15 Python
python数字图像处理之高级形态学处理
2018/04/27 Python
详解django中使用定时任务的方法
2018/09/27 Python
Python日志处理模块logging用法解析
2020/05/19 Python
PyCharm 光标变成黑块的解决方式
2021/02/06 Python
css3实现信纸/同学录效果的示例代码
2018/12/11 HTML / CSS
canvas之万花筒效果的简单实现(推荐)
2016/08/16 HTML / CSS
canvas生成带二维码海报的踩坑记录
2019/09/11 HTML / CSS
Clarks鞋美国官网:全球领军鞋履品牌
2017/05/13 全球购物
新西兰优惠网站:Treat Me
2019/07/04 全球购物
本科生个人求职自荐信
2013/09/26 职场文书
2014年开学第一课活动方案
2014/03/06 职场文书
环境工程专业毕业生求职信
2014/09/30 职场文书
小学生安全教育主题班会
2015/08/12 职场文书
退休劳动合同怎么写?
2019/10/25 职场文书
python四个坐标点对图片区域最小外接矩形进行裁剪
2021/06/04 Python
解决MySQL Varchar 类型尾部空格的问题
2022/04/06 MySQL