基于JavaScript實現(xiàn)類似于百度學術高級檢索功能
百度學術http://xueshu.baidu.com/高級檢索是通過前臺生成后臺內(nèi)部高級語法來實現(xiàn)高級檢索的,可以通過前臺js做字符串拼接傳給后臺實現(xiàn),難度不大:
下面是高級檢索的核心功能代碼,我使用的是純js實現(xiàn),并未使用jquery:
<p class="fl srh-btn"> <input type="submit" class="srh-submit" style="height:px" value="高級搜索" id="highSearchObj"/> </p> //省略部分調(diào)用關系 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">審理經(jīng)過</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">調(diào)解</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中常用的最簡單的在頁面中動態(tài)修改前臺的方法。
第39行和第46行均為對新增代碼的動作處理,用于提交條件和子條件。
在第46行的函數(shù)里面,做了對字符串的拼接處理。
在第88行到第96行,實現(xiàn)了通過隱藏表單提交查詢條件的js+html調(diào)用。
jquery js實現(xiàn)高級條件檢索功能中檢索條件切換
基本思路:
1.HTML:
使用table展示所有檢索條件,使用input控件展示每一個檢索條件,定義兩種CSS類樣式,用以區(qū)分檢索條件的選中與未選中狀態(tài)
2.JS實現(xiàn):
為未選中的input綁定點擊事件,可通過綁定未選中的樣式類來實現(xiàn),代碼實現(xiàn)
function (event) {//event為點擊事件 $(event.target).parent().find( '.條件input-selected' ).toggleClass('條件input-selected' ).toggleClass( '條件input-default'); $(event.target).toggleClass( '條件input-selected' ).toggleClass('條件input-default' ); },
此時就實現(xiàn)了所有檢索條件的自動切換
相關文章
JS中類的靜態(tài)方法,靜態(tài)變量,實例方法,實例變量區(qū)別與用法實例分析
這篇文章主要介紹了JS中類的靜態(tài)方法,靜態(tài)變量,實例方法,實例變量區(qū)別與用法,結(jié)合實例形式詳細分析了JS中類的靜態(tài)方法,靜態(tài)變量,實例方法,實例變量相關功能、使用方法及操作注意事項,需要的朋友可以參考下2020-03-03ymPrompt的doHandler方法來實現(xiàn)獲取子窗口返回值的方法
今天在寫頁面時用到了ymPrompt的win方法來彈出一個窗口。由于要用到獲取子窗口返回來的值判斷是否刷新父窗口,在ymPrompt的組件Demo中一直沒有找到合適的方法實現(xiàn)2010-06-06javaScript嗅探執(zhí)行神器-sniffer.js
本文主要介紹了javaScript嗅探執(zhí)行神器-sniffer.js的相關知識。具有很好的參考價值,下面跟著小編一起來看下吧2017-02-02js中調(diào)用微信的掃描二維碼功能的實現(xiàn)代碼
這篇文章主要介紹了在js中調(diào)用微信的掃描二維碼功能的實現(xiàn)代碼,本文給大家分享了注意事項及常見問題分析,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-04-04javascript 對象數(shù)組根據(jù)對象object key的值排序
本文僅僅是實現(xiàn)了javascript 對象數(shù)組根據(jù)對象object key的值排序,算是對自己學習javascript這么久的一個小結(jié),希望大家能夠喜歡2015-03-03