基于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 相关文章推荐
显示、隐藏密码
Jul 01 Javascript
Javascript 布尔型分析
Dec 22 Javascript
开发 Internet Explorer 右键功能表(ContextMenu)
Jul 03 Javascript
Javascript实现倒计时(防页面刷新)实例
Dec 13 Javascript
vue组件中使用props传递数据的实例详解
Apr 08 Javascript
详解VUE-地区选择器(V-Distpicker)组件使用心得
May 07 Javascript
用Fundebug插件记录网络请求异常的方法
Feb 21 Javascript
vue防止花括号{{}}闪烁v-text和v-html、v-cloak用法示例
Mar 13 Javascript
Vue的编码技巧与规范使用详解
Aug 28 Javascript
vue中axios的二次封装实例讲解
Oct 14 Javascript
vue实现编辑器键盘抬起时内容跟随光标距顶位置向上滚动效果
May 28 Javascript
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连接mysql是否成功的代码分享
2014/01/24 PHP
浅谈使用 PHP 进行手机 APP 开发(API 接口开发)
2014/08/11 PHP
php构造函数与析构函数
2016/04/23 PHP
php while循环控制的简单实例
2016/05/30 PHP
微信随机生成红包金额算法php版
2016/07/21 PHP
php实现购物车功能(以大苹果购物网为例)
2017/03/09 PHP
PHP析构函数destruct与垃圾回收机制的讲解
2019/03/22 PHP
通过PHP设置BugFree获取邮箱通知
2019/04/25 PHP
jQuery formValidator表单验证插件开源了 含API帮助、源码、示例
2008/08/14 Javascript
本地对象Array的原型扩展实现代码
2010/12/04 Javascript
jQuery页面加载初始化常用的三种方法
2014/06/04 Javascript
js电话号码验证方法
2015/09/28 Javascript
跟我学习javascript的闭包
2015/11/16 Javascript
JS去除空格和换行的正则表达式(推荐)
2016/06/14 Javascript
基于Node的React图片上传组件实现实例代码
2017/05/10 Javascript
js如何编写简单的ajax方法库
2017/08/02 Javascript
AngularJS select设置默认值的实现方法
2017/08/25 Javascript
详解es6新增数组方法简便了哪些操作
2019/05/09 Javascript
在antd4.0中Form使用initialValue操作
2020/11/02 Javascript
[01:05:29]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster BO3 第二场 1月24日
2021/03/11 DOTA
python魔法方法-属性转换和类的表示详解
2016/07/22 Python
python requests使用socks5的例子
2019/07/25 Python
pytorch实现查看当前学习率
2020/06/24 Python
简单了解如何封装自己的Python包
2020/07/08 Python
Python numpy矩阵处理运算工具用法汇总
2020/07/13 Python
使用HTML5 Canvas绘制直线或折线等线条的方法讲解
2016/03/14 HTML / CSS
HTML5 embed 标签使用方法介绍
2013/08/13 HTML / CSS
MATCHESFASHION.COM法国官网:英国奢侈品零售商
2018/01/04 全球购物
GIVENCHY纪梵希官方旗舰店:高定彩妆与贵族护肤品
2018/04/16 全球购物
服务员自我评价
2014/01/25 职场文书
十八大感想感言
2014/02/10 职场文书
大学军训感言1000字
2014/02/25 职场文书
关于美容院的活动方案
2014/08/14 职场文书
机关干部三严三实心得体会
2014/10/13 职场文书
2015年妇幼保健工作总结
2015/05/19 职场文书
党员证明模板
2015/06/19 职场文书