DDR爱好者之家 Design By 杰米
百度学术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' ); },
此时就实现了所有检索条件的自动切换
DDR爱好者之家 Design By 杰米
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
DDR爱好者之家 Design By 杰米
暂无评论...
更新日志
2024年11月29日
2024年11月29日
- 凤飞飞《我们的主题曲》飞跃制作[正版原抓WAV+CUE]
- 刘嘉亮《亮情歌2》[WAV+CUE][1G]
- 红馆40·谭咏麟《歌者恋歌浓情30年演唱会》3CD[低速原抓WAV+CUE][1.8G]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[320K/MP3][193.25MB]
- 【轻音乐】曼托凡尼乐团《精选辑》2CD.1998[FLAC+CUE整轨]
- 邝美云《心中有爱》1989年香港DMIJP版1MTO东芝首版[WAV+CUE]
- 群星《情叹-发烧女声DSD》天籁女声发烧碟[WAV+CUE]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[FLAC/分轨][748.03MB]
- 理想混蛋《Origin Sessions》[320K/MP3][37.47MB]
- 公馆青少年《我其实一点都不酷》[320K/MP3][78.78MB]
- 群星《情叹-发烧男声DSD》最值得珍藏的完美男声[WAV+CUE]
- 群星《国韵飘香·贵妃醉酒HQCD黑胶王》2CD[WAV]
- 卫兰《DAUGHTER》【低速原抓WAV+CUE】
- 公馆青少年《我其实一点都不酷》[FLAC/分轨][398.22MB]
- ZWEI《迟暮的花 (Explicit)》[320K/MP3][57.16MB]