Search and highlight text on a page (javascript javascript)

It was necessary to search the page, or rather in the text, not the server, but the usual one. That is - uploaded a page where a lot of text, read, and if necessary, looking for. I rummaged through the Internet and, unfortunately, I didn’t find the option (with the transition between words and page scrolling), although there is nothing difficult to realize - either I was looking badly or no one had to.
Just finishing up - I decided to share the first option.

It goes without saying jQuery library.
I took the jQuery article as a basis - highlighting words in text or HTML from here ( for example ). How to connect to the page script there is described.

I will use below “word” = “word combination” = “word combination of letters and \ or symbols”.

Now let's start expanding the functionality:

search buttons, highlighting the next word and the previous one, and scrolling the page to the highlighted word

1) we do highlighting a specific word
we add to the jquery.highlight.js file

jQuery.fn.selectHighlight = function(number) { return this.find("span.highlight:eq("+number+")").addClass('selectHighlight').end(); }; 

')
2) in the style prescribe the display of the highlighted word and change the style of illumination for yourself

 .highlight { background-color: gray; color: white } .selectHighlight { background-color: rgb(35, 140, 0) } 

3) Create buttons and input field

 <div id="search_block"> <label> Search: <input id="search_text" type="text" value=""/> </label> <input id="search_button" type="button" value="Search"/> <input id="prev_search" type="button" value="<"/> <input id="next_search" type="button" value=">"/> <input id="clear_button" type="button" value="Clear"/> </div> 

4) attributed to action buttons
Copy the code:

(I will describe below what this function is for)

 function scroll_to_word(){ pos = $('#text .selectHighlight').position() $('#content').jqxPanel('scrollTo', 0, pos.top - 5); } 

  var search_number = 0; //     var search_count = 0; //   //search -       "search_button" $('#search_button').click(function() { $('#text').removeHighlight(); txt = $('#search_text').val(); if (txt == '') return; $('#text').highlight(txt); search_count = $('#text span.highlight').size() - 1; search_number = 0; $('#text').selectHighlight(search_number); //     scroll_to_word(); //     }); //clear -       "clear_button" $('#clear_button').click(function() { $('#text').removeHighlight(); }); //prev_search -           $('#prev_search').click(function() { if (search_number == 0) return; $('#text .selectHighlight').removeClass('selectHighlight'); search_number--; $('#text').selectHighlight(search_number); scroll_to_word(); }); //next_search -           $('#next_search').click(function() { if (search_number == search_count) return; $('#text .selectHighlight').removeClass('selectHighlight'); search_number++; $('#text').selectHighlight(search_number); scroll_to_word(); }); 

five)
function scroll_to_word(){...} - scroll (rewind) function of the page to the word we need
Well, in general, it is done very easily using a simple jqueryscrollto plugin, which we take from here , and look for the class .highlight and the number eq('+search_number +') ( search_number - look in the list of global script variables).

 jQuery('#content').scrollTo('.highlight('+search_number +')'); 

But I had to use this set of plug-ins (jqwidgets), because I needed my own scrolling for the page and not the browser-based one, so I used their API :
scrollTo Method
Scroll to specific position.
Code examples
Invoke the scrollTo method.

 $('#jqxPanel').jqxPanel('scrollTo', 10, 20); 

 function scroll_to_word(){ pos = $('#text .selectHighlight').position() $('#content').jqxPanel('scrollTo', 0, pos.top - 5); // 5 -            -    } 

Demo
Here is the hike and everything.
I apologize for the non-optimized code - I just finished it and decided to share it, this is only the initial version.