Based on JavaScript implementation similar to Baidu Academic advanced search function _javascript skills

Baidu Academic http://xueshu.baidu.com/advanced search through the foreground to generate advanced internal grammar to achieve advanced search, can be done through the foreground JS string stitching to the background to achieve, is not very difficult:

The following is the core functional code of Advanced search, I use a pure JS implementation, not using jquery:

<p class= "fl srh-btn" > <input type= "Submit" class= "Srh-submit" style= "height:px" "value=" Advanced Search "id=" Highsearchobj "/> </p>//Omitting part of the call relationship 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" > contains keywords </span><input id= "kywds" "value=" "></li> \ <li ><span id= "Tabreg" class= "tab" > does not contain keywords </span><input id= "nokywds" value= "" ></li>\ <li ><span id= "Tabreg" class= "tab" > Search range </span>\ <select id= "St" >\ <option value = "BYRW" > The court believes that
</option>\ <option value = "SLJG" > Trial after </option>\ <option value= "YGSC" > Plaintiff v. </option>\ <option value= "BGBC" > Defendant argued </option>\ </select></li>\ </ul>\ <input id= "CONDITIONOBJ "Type=" Submit "value=" new set of conditions "></input>\  

Lines 3rd through 36th are mainly HTML code for the 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 the actions for the new code to commit the condition and the child condition.

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

In lines 88th through 96th, Js+html calls are implemented by hiding form submission query criteria.

jquery JS realizes retrieval condition switching in advanced conditional retrieval function

Basic ideas:

1.HTML:

Use table to show all the search criteria, use the input control to display each of the search criteria, define two CSS class styles to distinguish between the selected and unchecked status of the search criteria

2.JS implementation:

A point-and-click event for an unchecked input binding can be implemented by binding an unchecked style class, and the code implements

The function (event) {//event is a click event
$ (event.target). Parent (). Find ('. Condition input-selected '). Toggleclass (' Condition input-selected '). Toggleclass (' condition Input-default ');
$ (event.target). Toggleclass (' Condition input-selected '). Toggleclass (' conditional input-default ');

The automatic switching of all the retrieval conditions is realized at this time