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

 更新时间:2016年03月02日 08:59:12   作者:程羽蒙  
这篇文章主要介绍了基于JavaScript实现类似于百度学术高级检索功能 的相关资料,需要的朋友可以参考下

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

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

相关文章

  • JS中类的静态方法,静态变量,实例方法,实例变量区别与用法实例分析

    JS中类的静态方法,静态变量,实例方法,实例变量区别与用法实例分析

    这篇文章主要介绍了JS中类的静态方法,静态变量,实例方法,实例变量区别与用法,结合实例形式详细分析了JS中类的静态方法,静态变量,实例方法,实例变量相关功能、使用方法及操作注意事项,需要的朋友可以参考下
    2020-03-03
  • 详解javascript中的Strict模式

    详解javascript中的Strict模式

    我们都知道javascript是一个弱类型语言,在ES5之前,javascript的程序编写具有很强的随意性,我可以称之为懒散模式(sloppy mode)。比如可以使用未定义的变量,可以给对象中的任意属性赋值并不会抛出异常等等。本文将详细介绍javascript中的Strict模式。
    2021-06-06
  • ymPrompt的doHandler方法来实现获取子窗口返回值的方法

    ymPrompt的doHandler方法来实现获取子窗口返回值的方法

    今天在写页面时用到了ymPrompt的win方法来弹出一个窗口。由于要用到获取子窗口返回来的值判断是否刷新父窗口,在ymPrompt的组件Demo中一直没有找到合适的方法实现
    2010-06-06
  • 图片懒加载插件实例分享(含解析)

    图片懒加载插件实例分享(含解析)

    本文主要介绍了图片懒加载插件,函数节流的应用以及函数节流具体的好处、常用的场景。具有一定的参考价值,下面跟着小编一起来看下吧
    2017-01-01
  • iframe调用父页面函数示例详解

    iframe调用父页面函数示例详解

    这篇文章主要介绍了iframe如何调用父页面函数,下面有个不错的示例,大家可以参考下
    2014-07-07
  • javaScript嗅探执行神器-sniffer.js

    javaScript嗅探执行神器-sniffer.js

    本文主要介绍了javaScript嗅探执行神器-sniffer.js的相关知识。具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • js中调用微信的扫描二维码功能的实现代码

    js中调用微信的扫描二维码功能的实现代码

    这篇文章主要介绍了在js中调用微信的扫描二维码功能的实现代码,本文给大家分享了注意事项及常见问题分析,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-04-04
  • 通过jQuery学习js类型判断的技巧

    通过jQuery学习js类型判断的技巧

    这篇文章主要介绍了通过jQuery学习js类型判断的技巧,下面和小编一起来学习一下吧
    2019-05-05
  • Js面试算法详解

    Js面试算法详解

    AI的兴起,使得大家对算法的关注也越来越高。而作为一个前端工程师,算法很多时候是我们的弱点,本文译自国外一篇面试题。列出了一些简单算是跟算法相关的面试题
    2018-04-04
  • javascript 对象数组根据对象object key的值排序

    javascript 对象数组根据对象object key的值排序

    本文仅仅是实现了javascript 对象数组根据对象object key的值排序,算是对自己学习javascript这么久的一个小结,希望大家能够喜欢
    2015-03-03

最新评论