基于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 相关文章推荐
拖动Html元素集合 Drag and Drop any item
Dec 22 Javascript
JavaScript 精粹读书笔记(1,2)
Feb 07 Javascript
ExtJs的Date格式字符代码
Dec 30 Javascript
JavaScript 选中文字并响应获取的实现代码
Aug 28 Javascript
Jquery事件的连接使用示例
Jun 18 Javascript
JavaScript中setInterval的用法总结
Nov 20 Javascript
js浮点数保留两位小数点示例代码(四舍五入)
Dec 26 Javascript
关于jQuery判断元素是否存在的问题示例探讨
Jul 21 Javascript
jQuery实现仿QQ头像闪烁效果的文字闪动提示代码
Nov 03 Javascript
jQuery点击头像上传并预览图片
Feb 23 Javascript
学习使用Bootstrap页面排版样式
May 11 Javascript
JS实现带导航城市列表以及输入搜索功能
Jan 04 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
一键删除顽固的空文件夹 软件下载
2007/01/26 PHP
在PHP中使用反射技术的架构插件使用说明
2010/05/18 PHP
教你如何使用php session
2013/10/28 PHP
WordPress中对访客评论功能的一些优化方法
2015/11/24 PHP
JavaScript 核心参考教程 内置对象
2009/10/13 Javascript
jquery 面包屑导航 具体实现
2013/06/05 Javascript
JavaScript中双叹号!!作用示例介绍
2014/09/21 Javascript
IE8下jQuery改变png图片透明度时出现的黑边
2015/08/30 Javascript
动态加载JavaScript文件的两种方法
2016/04/22 Javascript
Angular实现一个简单的多选复选框的弹出框指令实例
2017/04/25 Javascript
vue-cli webpack 开发环境跨域详解
2017/05/18 Javascript
echart简介_动力节点Java学院整理
2017/08/11 Javascript
jQuery+ajax读取json数据并按照价格排序示例
2018/03/28 jQuery
关于vue-router的那些事儿
2018/05/23 Javascript
详解关于vue2.0工程发布上线操作步骤
2018/09/27 Javascript
详解React之key的使用和实践
2018/09/29 Javascript
jQuery中实现text()的方法
2019/04/04 jQuery
原生js实现下拉选项卡
2019/11/27 Javascript
vue使用screenfull插件实现全屏功能
2020/09/17 Javascript
用Python编写分析Python程序性能的工具的教程
2015/04/01 Python
浅谈Python peewee 使用经验
2017/10/20 Python
Python读取properties配置文件操作示例
2018/03/29 Python
通过Python 接口使用OpenCV的方法
2018/04/02 Python
python 重定向获取真实url的方法
2018/05/11 Python
Python3 Post登录并且保存cookie登录其他页面的方法
2018/12/28 Python
python模块之subprocess模块级方法的使用
2019/03/26 Python
Django框架模板文件使用及模板文件加载顺序分析
2019/05/23 Python
在Python中表示一个对象的方法
2019/06/25 Python
Python+OpenCV实现实时眼动追踪的示例代码
2019/11/11 Python
HTML5 语义化结构化规范化
2008/10/17 HTML / CSS
开服装店计划书
2014/08/15 职场文书
美德少年事迹材料500字
2014/08/19 职场文书
仓库保管员岗位职责
2015/02/09 职场文书
一次SQL如何查重及去重的实战记录
2022/03/13 MySQL
muduo TcpServer模块源码分析
2022/04/26 Redis
mysql sql常用语句大全
2022/06/21 MySQL