Complete the search function in the html page

Recently, I have been engaged in a framework that has been changed by many people. I look at the dizziness of the head and look at the code every day, but I feel that the progress is quite large. I made a background to configure the front desk to view the two libraries different data range. Satisfaction, take it out that day to share. Today, let's talk about the function of the HTML page these days.

This function is mainly to enter the character in the search box. After pressing the last next button behind, the matching characters in the query area will be automatically marked with special styles. After that, you can continue to press the previous button to browse in order in order. Matching characters and distinguish the currently matched characters in another style with other matching characters.

The front desk is probably like this:

HTML is this:

 <div class = Container style = z-index: 999 id = Searchdiv> <div class = keyword-search> Find: <input ID = key type = text style = width: 200px; Placehol der = keywords/> <a href = javascript: void (0); class = Prev Onclick = 'Wordsearch (1)'> <i class = c-ICON> </i> </a> <a href = javascript: void (0); = 'wordsearch ()'> <i class = c-ICon> </i> </a> </div> </div>

Script code:

 <script> // Search function varuntkey0 =; Var Index0 = -1; VAR OLDCount0 = 0; VAR NewFlag = 0; VAR CurrentLength = 0; Function wordsearch (FLG) {var key = $ (# key). Val () ; // Take the key value if (! Key) {Return; // key Exit} Getarray (); Search, Index clearing index0 = 0;} if (! FLG) {if (OldCount0! = 0) {// If you still search if (index0 <count0) {// If you do n’t finish the left, go on the left Focusmove (Index0 );;} Else If (Index0 == Oldcount0) {// After gone, I have finished index0 = 0; (Index0); Index0 ++;}} } Else {if (oldcount0! = 0) {// If you also search if (index0 <= Oldcount0 && Index0> 0) {// If the left side is not finished, go left index0-; focusmove (index0);} else If (INDEX0 == 0) {// After gone, INDEX0 = OLDCOUNT0; Index0- Focusmove (Index0);}} Function Getarray () {newflag = 1; $ (.Rast .Result). RemoveClass (res) ; var key = $ (#key). Val (); // Take the key value if (! Key) {oldkey0 =; return; // key Exit} if (Oldkey0! = Key || $ (. Current ) .length! = CurrenTLENGTH) {// Reset index0 = 0; var index = 0; $ (. Contract .Result) .each (function () {$ (this) .replacewith ($ (this) .html () );}); POS0 = New Array (); if ($ (. Contract-wrap). Hasclass (Current) {CurrenTlength = $ (. Current) .Length; $ (.Contrast). CTION (CTION ( ) {$ (this) .html ($ (this) .html (). Replace (new regexp (key, gm), <span id = 'result + (index ++) +' class = 'result'> + key + < /span>)); // Replace});} Else {$ (. Contract-wrap) .addclass ('Current'); ) {$ (this) .html ($ (this) .html (). Replace (new regexp (key, gm), <span id = 'result + (index ++) +' class = 'result'> + key + < /span>)); // Replace});} // $ (#key).val (key); Oldkey0 = key; // $ /$ /$ /$ (.Contrast .Result). this) .parents ('. Contrast-wrap'). Addclass ('Current'); // POS0.Push ($ (project) .offset (). Top); // pos0.push ($ (.contrast .Result: EQ (2)). Offset (). TOP -$ (. Contrast .Result: EQ (2)). Parents (.contrast) .ofFSet (). Top); .Result) .length; newflag = 0;} Function Focusmove (INDEX0) {$ (. Contract: EQ ( + Index0 +)). 'Current'); $ (. Contrast .Result: EQ ( + Index0 +)). AddClass (res); var Top = $ (. Contract: EQ ( + Index0 +)). Officet (). : EQ ( + Index0 +)). Parezts (.contrast). Scrolltop (); VAR Intop = Top -$ (. Contract: EQ ( + Index0 +)). ; $ (. Contrast .Result: EQ ( + Index0 +)). Parents (.contrast). Animate ({scrolltop: intop}, 200); if ($ (. Contract: EQ ( + Index0 +)). Parents (.contrast). Scrolltop () == 0) {$ (html, body). Animate ({scrolltop: top -200}, 200);} else {$ (html, body) .animate ({scroltop: $: $ (.contrast .Result: EQ ( + Index0 +)). Parents (.contrast) .Offset (). TOP -200}, 200);}} $ ('#Key'). $ ('#Key'). Val () ==) {index0 = 0; $ (. Contract .Result) .each (function () {$ (this) .RePlacewith ($ (this) .html ())); }); Oldkey0 =;}}); </script>

First of all, remove the last query results, and then use the value of the key to use the regular expression to add all the matching characters in the area to add a special style. For example, all the SPAN tags named Result are added in the method. , Use ODKEY0 variables to record the value of key (the next time you enter the next time, if you compare the same, it means to see the next or the previous one, you do not need to enter the regular expression) , Newflag Set 0 (if it was not for the initial query Newflag to 1).

Then enter the getNext method. FLG said that the user presses the previous or the next button, and use index0 to record which matching character is currently viewing. Compared with OldCount0, it is determined to increase or decrease or 0 (if greater than OldCount0 or less than 0 than 0 , Start again).

The FocusMove method is to locate the page of the current element.

EQ () selector: Select the selection of elements with specified index values. For example: $(.contrast .result:eq(1)) , which is the second class name of result in the selected class name of the contrast element.

Parents () method: All parent elements of the element. $(p).parents('.contrast-wrap') , and all the classes named contrast-wrap in the P element were.

The replace () method: replace the selected element with the specified HTML content, note that the element of the selected element is also replaced.

Offset () method: Return or set the matching element's offset (position) relative to the document.

Scrolltop () method: Return or set the vertical position of the rolling bar of the matching element.

The above is the HTML page introduced by Xiaobian to complete the search function. I hope it will be helpful to everyone. If you have any questions, please leave me a message. Xiaobian will reply to everyone in time. Thank you very much for your support for the VEVB Wulin website!