足球游戏_中国足彩网¥体育资讯$

基于JavaScript实现类似于百度学术高级检索功能
来源:易贤网 阅读:1449 次 日期:2016-08-04 14:16:23
温馨提示:易贤网小编为您整理了“基于JavaScript实现类似于百度学术高级检索功能”,方便广大网友查阅!

这篇文章主要介绍了基于JavaScript实现类似于百度学术高级检索功能 的相关资料,需要的朋友可以参考下

下面是高级检索的核心功能代码,我使用的是纯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' );

},

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

中国足彩网信息请查看网络编程
由于各方面情况的不断调整与变化,易贤网提供的所有考试信息和咨询回复仅供参考,敬请考生以权威部门公布的正式信息和咨询为准!

2025国考·省考课程试听报名

  • 报班类型
  • 姓名
  • 手机号
  • 验证码
关于我们 | 联系我们 | 人才招聘 | 网站声明 | 网站帮助 | 非正式的简要咨询 | 简要咨询须知 | 加入群交流 | 手机站点 | 投诉建议
工业和信息化部备案号:滇ICP备2023014141号-1 足球游戏_中国足彩网¥体育资讯$ 滇公网安备53010202001879号 人力资源服务许可证:(云)人服证字(2023)第0102001523号
云南网警备案专用图标
联系电话:0871-65099533/13759567129 获取招聘考试信息及咨询关注公众号:hfpxwx
咨询QQ:526150442(9:00—18:00)版权所有:易贤网
云南网警报警专用图标