Search a page with jQuery

Many site visitors are unaware of the search for a page by pressing Ctrl + F and looking for the necessary fragment with their eyes, just scrolling through the text. This method becomes problematic if there are more than three or four screens on a text page. For these visitors, I decided to implement a search on the page using jQuery.
An example of such a search is on the website of the Constitution of the Russian Federation , but there it works somehow strange.

A warning

I am not a professional programmer, please do not kick the curve code and the possible invention of the bicycle.

HTML form

First of all, let's place on the page the HTML code of the search form. The form includes two elements - a field for entering text and a DIV for displaying search results.

<input id="spterm" type="text" name="spterm" placeholder=" ?"><br /> <div id="spresult"> </div>

CSS

We set two styles: the first is for selecting a fragment, the second is for referring to the first fragment.

 span.highlight { background-color: #C6D9DB; cursor: pointer; } span.splink { color: #0A5794; cursor: pointer; }

Search setting

  var minlen = 3; //    var paddingtop = 30; //     var scrollspeed = 200; //   var keyint = 1000; //

Highlighting fragments

Basic functionality - highlighting of fragments in the text. This is done using regular expressions.

 function dosearch() { term = jQuery('#spterm').val(); jQuery('span.highlight').each(function(){ //   jQuery(this).after(jQuery(this).html()).remove(); }); var t = ''; jQuery('div.entry-content').each(function(){ //      jQuery(this).html(jQuery(this).html().replace(new RegExp(term, 'ig'), '<span class="highlight">$&</span>')); //    n = jQuery('span.highlight').length; //    console.log('n = '+n); if (n==0) jQuery('#spresult').html('  '); else jQuery('#spresult').html(': '+n); }); } jQuery('#spterm').keyup(function(){ if (jQuery('#spterm').val()!=term) // ,    if (jQuery('#spterm').val().length>=minlen) { //    dosearch(); //    ,    } else jQuery('#spresult').html(' '); //   ,    DIV   });

Transition between fragments

It is not enough to select fragments, it is much more convenient to organize a quick transition between them. Under the form we place the link to go to the first found fragment. In order not to occupy space with arrows, click on each fragment leads to the next. Clicking on the last fragment returns the user to the search form.

  if (n==0) jQuery('#spresult').html('  '); else jQuery('#spresult').html(': '+n); if (n>1) //    ,      { var i = 0; jQuery('span.highlight').each(function(i){ jQuery(this).attr('n', i++); //  ,         }); jQuery('span.highlight').not(':last').attr({title: ',     '}).click(function(){ //  ,  ,   jQuery('body,html').animate({scrollTop: jQuery('span.highlight:gt('+jQuery(this).attr('n')+'):first').offset().top-paddingtop}, scrollspeed); //     }); jQuery('span.highlight:last').attr({title: ',     '}).click(function(){ jQuery('body,html').animate({scrollTop: jQuery('#spterm').offset().top-paddingtop}, scrollspeed); //     }); }

Search start delay

Search in the large text and highlighting take a few seconds, for which the page hangs. When typing a long word, the search is performed after each entered letter.

  jQuery('#spterm').keyup(function(){ var d1 = new Date(); time_keyup = d1.getTime(); if (jQuery('#spterm').val()!=term) // ,    if (jQuery('#spterm').val().length>=minlen) { //    setTimeout(function(){ //    var d2 = new Date(); time_search = d2.getTime(); if (time_search-time_keyup>=keyint) //     dosearch(); //    ,    }, keyint); } else jQuery('#spresult').html(' '); //   ,    DIV   });

Bonus

Add the ability to create links to any text on the page without using <a name="...">. Just create a link to the page and add # text.

  if (window.location.hash!="") //  { var t = window.location.hash.substr(1, 50); //   jQuery('#spterm').val(t).keyup(); //      jQuery('#spgo').click(); //     }

All code

 jQuery(document).ready(function(){ var minlen = 3; //    var paddingtop = 30; //     var scrollspeed = 200; //   var keyint = 1000; //     var term = ''; var n = 0; var time_keyup = 0; var time_search = 0; jQuery('body').delegate('#spgo', 'click', function(){ jQuery('body,html').animate({scrollTop: jQuery('span.highlight:first').offset().top-paddingtop}, scrollspeed); //     }); function dosearch() { term = jQuery('#spterm').val(); jQuery('span.highlight').each(function(){ //   jQuery(this).after(jQuery(this).html()).remove(); }); var t = ''; jQuery('div#content').each(function(){ //      jQuery(this).html(jQuery(this).html().replace(new RegExp(term, 'ig'), '<span class="highlight">$&</span>')); //    n = jQuery('span.highlight').length; //    console.log('n = '+n); if (n==0) jQuery('#spresult').html('  '); else jQuery('#spresult').html(': '+n+'. <span class="splink" id="spgo"></span>'); if (n>1) //    ,      { var i = 0; jQuery('span.highlight').each(function(i){ jQuery(this).attr('n', i++); //  ,         }); jQuery('span.highlight').not(':last').attr({title: ',     '}).click(function(){ //  ,  ,   jQuery('body,html').animate({scrollTop: jQuery('span.highlight:gt('+jQuery(this).attr('n')+'):first').offset().top-paddingtop}, scrollspeed); //     }); jQuery('span.highlight:last').attr({title: ',     '}).click(function(){ jQuery('body,html').animate({scrollTop: jQuery('#spterm').offset().top-paddingtop}, scrollspeed); //     }); } }); } jQuery('#spterm').keyup(function(){ var d1 = new Date(); time_keyup = d1.getTime(); if (jQuery('#spterm').val()!=term) // ,    if (jQuery('#spterm').val().length>=minlen) { //    setTimeout(function(){ //    var d2 = new Date(); time_search = d2.getTime(); if (time_search-time_keyup>=keyint) //     dosearch(); //    ,    }, keyint); } else jQuery('#spresult').html(' '); //   ,    DIV   }); if (window.location.hash!="") //  { var t = window.location.hash.substr(1, 50); //   jQuery('#spterm').val(t).keyup(); //      jQuery('#spgo').click(); //     } });

disadvantages

On large pages (approximately 60 kb of text), the script hangs for a couple of minutes.
')
Demo: http://jsfiddle.net/6c3ph7uj/2/

Thank you for your attention, I will be grateful for comments and ideas on how to improve the script.

Source: https://habr.com/ru/post/257025/

All Articles