JS implementation is similar to the advanced search function of Baidu academic

Baidu Academic http://xueshu.baidu.com/Advanced Search is through the foreground to generate the internal advanced syntax to achieve advanced retrieval, can be done by the foreground JS string splicing to the background implementation, the difficulty is small:

Here is the core function code of Advanced search, I use the pure JS implementation, do not use jquery:

1 <Pclass= "FL srh-btn">2             <inputtype= "Submit"class= "Srh-submit"style= "height:43px"value= "Advanced Search"ID= "Highsearchobj"/>3         </P>

Omit partial call relationship

1      This. Highsearch =function () {2document.getElementById (' Highsearchobj '). disabled=true; 3         varhighsearchhtml = '<div class= "Highsearch" style= "Display:block" ><div class= "highmsg" ><ul>4 <li><span id= "Tabreg" class= "tab" > contains keywords </span><input id= "kywds" value= "" & Gt;</li>5 <li><span id= "Tabreg" class= "tab" > does not contain keywords </span><input id= "Nokywds" value= "" ></li>6 <li><span id= "Tabreg" class= "tab" > Search range </span>7 <select id= "St" >8 <option value = "BYRW" > Our opinion </option>9 <option value = "SLJG" > Trial pass </option>Ten <option value= "YGSC" > Plaintiff claims </option> One <option value= "BGBC" > Defendant argues </option> A </select></li> - </ul> - <input id= "Conditionobj" type= "Submit" value= "add a set of conditions" ></input> the  - <div class= "fit" > - <select id= "type" > - <option value = "All" > Full </option> + <option value = "PJ" > Verdict </option> - <option value = "CD" > Rulings </option> + <option value= "TZ" > Notifications </option> A <option value= "JD" > Decision </option> at <option value= "TJ" > Mediation </option> - </select><select id= "Round" > - <option value = "All" > Full </option> - <option value = "One" > First Instance </option> - <option value = "Two" > second trial </option> - <option value= "Again" > Retrial </option> in </select> - <input id= "bg" value= ">-<input id=" End "value=" > to <ul><li><span id= "Tabreg" class= "tab" > The </span><input id= "ay" value= "></" Input></li> + <li><span id= "Tabreg" class= "tab" > Court </span><input id= "FY" value= "></input></ Li> - </ul></div> the <ul id= "SQL" ></ul> * <input id= "Submithighsearchobj" type= "Submit" value= "Advanced Search" ></input> $</div></div> ';Panax Notoginseng          This. Highsearchobj =$ (highsearchhtml); -$ ("Body"). Append ( This. highsearchobj); the$ ("#conditionObj"). Click (function(){ +             varKywds= "\" "+document.getelementbyid (" Kywds "). Value.split (" "). Join (" \ "&\" ") +" \ ""; A             varSt=document.getelementbyid ("St"). Value; the             varNokywds= "\" "+document.getelementbyid (" Nokywds "). Value.split (" "). Join (" \ "|\" ") +" \ ""; +             varSql= "<li name=\" hightag\ ">@ (" +st+ ") (" +kywds+ "-" +nokywds+ ") </li>"; -$ ("#sql"). append (sql); $         }) $$ ("#submitHighSearchObj"). Click (function(){ -             varHightags=document.getelementsbyname ("Hightag"); -             varTags= ""; the             varFilters= ""; -             varRound=document.getelementbyid ("Round"). Value;Wuyi             varType=document.getelementbyid ("type"). Value; the             varReason=document.getelementbyid ("Ay"). Value.split (""). Join (","); -             varCourt=document.getelementbyid ("FY"). Value.split (""). Join (","); Wu             varBegin=document.getelementbyid ("BG"). Value; -             varEnd=document.getelementbyid ("End"). Value; About             if(hightags.length==0){ $                 varKywds= "\" "+document.getelementbyid (" Kywds "). Value.split (" "). Join (" \ "&\" ") +" \ ""; -                 varSt=document.getelementbyid ("St"). Value; -                 varNokywds= "\" "+document.getelementbyid (" Nokywds "). Value.split (" "). Join (" \ "|\" ") +" \ ""; -Tags= "@ (" +st+ ") (" +kywds+ "-" +nokywds+ ")";  A}Else { +                  for(i=0;i){ thetags+=hightags[i].innerhtml; -                 }         $             } the             if(Round! = "All") { thefilters+= "Round:" +round+ ";"; the             } the             if(Type! = "All") { -filters+= "type:" +type+ ";"; in             } the             if(Reason! = "") { thefilters+= "Reason:" +reason+ ";"; About             } the             if(court! = "") { thefilters+= "court:" +court+ ";"; the             } +             if(Begin! = "" && End! = "") { -filters+= "Year:"; the                  while(begin<=end) {BayiFilters=filters+begin+ ","; thebegin++; the                 } -             } -             if(Filters! = "") { theTags= "Magic:" +tags+ "; Filter:" +filters; the             } the             varFormobj = $ (' <form id= "form" action= "/search" target= "_self" method= "get" ></form> '); the             varhtml = [' <input type= ' hidden "name=" type "value=" 1 "> ']; -Html.push (' <input type= ' hidden "name=" keyword "value=" ' + encodeuricomponent (tags) + ' ">"); theHtml.push (' <input type= ' hidden "name=" Typekey "value=" ' + encodeuricomponent (tags) + ' ">"); theFormobj.html (Html.join (",")); the$ ("Body"). Append (formobj);94 formobj.submit (); the         }); the //$ ("#ay"). KeyUp (function (e) { the //        });98}

Lines 3rd through 36th are mainly the HTML code of the popup window.

The 37,38 line uses the simplest method commonly used in JS to dynamically modify the foreground in the page.

Lines 39th and 46th are action processing for new code, which is used to submit conditions and sub-conditions.

In the function of line 46th, the concatenation of strings is done.

On lines 88th through 96th, a js+html call is implemented that submits the query criteria by hiding the form.

This approach can also be used in rich text editing scripts.

JS implementation is similar to the advanced search function of Baidu academic