Based on JavaScript, this function is similar to Baidu's advanced academic search function and javascript advanced search function.
Baidu academic community:
The following is the core function code of advanced search. I use pure js implementation, but not jquery:
<P class = "fl srh-btn"> <input type = "submit" class = "srh-submit" style = "height: px "value =" Advanced Search "id =" highSearchObj "/> </p> // omitting some call relationships 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 I D = "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"> in our opinion </option >\< option value = "sljg"> after trial </option> \ <option value = "ygsc"> claim by the plaintiff </option> \ <option value = "bgbc"> the defendant argued that </option> \ </select> </li> \ </ul> \ <input id = "conditionObj" type = "submit" value = "added a set of conditions "> </input> \
Rows 3rd to 36th are mainly HTML code with pop-up windows.
Lines 37 and 38 use the simplest method commonly used in js to dynamically modify the foreground on the page.
Rows 39th and 46th are the actions for the newly added code. They are used to submit conditions and subconditions.
In the 46th rows function, the string is spliced.
Lines 88th to 96th provide JavaScript + html calls to submit query conditions by hiding forms.
Jquery js implements retrieval condition switching in the advanced conditional search function
Basic Ideas:
1. HTML:
Display All search conditions using table, use the input control to display each search condition, and define two CSS styles to distinguish the selected and unselected statuses of search conditions.
2. JS implementation:
Bind click events for unselected input, which can be achieved by binding unselected style classes. Code Implementation
Function (event) {// eventis a click event (event.tar get ). parent (). find ('. condition input-selected '). toggleClass ('condition input-selected '). toggleClass ('condition input-default'{}}(event.tar get ). toggleClass ('condition input-selected '). toggleClass ('condition input-default ');},
In this case, automatic switching is achieved for all search conditions.
Articles you may be interested in:
- Android SDK: Use of the Baidu map retrieval overview interface in poi