JavaScript-based implementation of advanced search functions similar to Baidu academic-javascript skills

This article describes how to use JavaScript to implement advanced search functions similar to Baidu's academic functions:

The following is the core function code of advanced search. I use pure js implementation, but not jquery:

// Omit Part Of The call relationship this. highSearch = function () {document. getElementById ('highsearchobj '). disabled = true; var highSearchHtml ='

 
 

  
  
\
  
  
Include keywords
\
  
  
Does not contain keywords
\
  
  
Search range \\The court believes that\Trial passed\Plaintiff claimed\Defendant argued\
\
 
 
\\\
\\All\Decision\Ruling\Notification\Decision\Mediation\\All\Preliminary Review\Second Review\Retrial\\-\
 
 

  
  
Case
\
  
  
Court
\
 
 
\
 
 
\\
'; 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 ="
@ ("+ St +") ("+ kywds +"-"+ nokywds + ")
"; $ (" # 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
 
  
']; Html. push ('
  '); Html. push ('
  'Privacy protection formobj.html (html. join (","); $ ("body "). append (formObj); formObj. submit () ;}); // $ ("# ay "). keyup (function (e ){//});}
 

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.