jquery Implementation page Lookup feature sample sharing

  When you need to find a keyword in the page, one can be achieved through the browser search function, the second is through the front-end script to find positioning accurately, this article describes the implementation of jquery through the page content lookup positioning function, and can be extended to display the relevant information after the search

This article to find the station name for example, imitation 12306 official website to find the station ticket time page effect, when the user input keyword Click find button or press ENTER, jquery through the regular match content, accurate matching keyword, and quickly positioning the page to scroll to the first matching position, and display relevant information (in this case the additional information for the station to start the ticket time).   HTML   pages need to place an input box to enter the keyword to find, and a lookup button, then the main content #content, the bread contains n <p&gt, that is, each time the ticket sales station name.    code as follows: <div id= "Search_box" >      <input class= "textbox" id= "Searchstr" type= "text" Size= "name=" Searchstr "/>       <input class=" Sbttn "id=" search_btn "type=" button "value=" page search />  </div>  <div id= "content" >      <p><strong>8:00 start-selling station </ Strong><br/>  Anyang, Baicheng, Beijing West, Chengdu East, Daqing, Daqing West, Dongguan, Dongguan East, Huizhou, Jinhua South, Jinyun, Jiujiang, Lanzhou, Lishui, Linfen, Nanchong,   Qiqihar, Qingtian, Rizhao, Shanhaiguan, Shantou, Songyuan, Wenzhou, Ulanhot, Urumqi, Wuchang, Wuyi, Xian, Yongkang, Yuncheng. </p>      .... Here is omitted n p  </div>      CSS   simple CSS settings for page content, where. Highlight and # Tip is used to set the style effects of the find result highlighting and the message balloon display, which we'll see later.     Code as follows: #search_box {background:white; opacity:0.8 text-align:right}  #search_btn {background: #0f79be; margin-top:6px; border-radius:2px; border:0px;   width:100px; line-height:24px; Color:white; }  #searchstr {font-size:14px; height:20px;}   Highlight {background:yellow; color:red}   #tip {background: #ffc; border:1px solid #999; width:110px; text-align:center;   Display:none; Font-size: 12px; }      JQuery   First, we want to implement the effect of a fixed div, that is, when the page is scrolling down, the input boxes and buttons used to find are always fixed at the top of the page to facilitate further search.     Code as follows: (function ($) {      $.fn.fixdiv = function (options) {          var defaultval = {              top:10         };  &nbs P       var obj = $.extend (defaultval, Options);          $this = this;          var _top = $this. Offset () .top;          var _left = $this. Offset (). LEFT;&NB Sp         $ (window). Scroll (function () {&NBSp             var _currenttop = $this. Offset () .top;            & nbsp var _scrolltop = $ (document). ScrollTop ();              if (_scrolltop > _top) {&nbsp ;                 $this. Offset ({              &NB Sp       Top: _scrolltop + obj.top,                    &NBSP ; Left: _left                 };            &NB Sp else {                  $this. Offset ({          &N Bsp           Top: _top,                      Left: _left                 };            }         });          return $this;     };&NBSP ; (jQuery);      Then, we call Fixdiv ().      code as follows: $ (function () {      $ ("#search_box"). Fixdiv ({top:0}); });    &N Bsp Next, the most critical implementation of the lookup function. When the keyword is entered, click the lookup button or press ENTER to invoke the Lookup function highlight ().      code as follows: $ (function () {      ...      $ (' #search_btn '). Click (highlight); /click Search to perform highlight function;      $ (' #searchstr '). KeyDown (function (e) {          var key = e.which;          if (key = = Highlight ();     })     &NBSP ; ... });      in function highlight () need to do a lot of things, 1. Clear the last highlighted content, 2. Hide and clear the message, 3. To determine if the input is empty, 4. Gets the input keyword, and a regular match with the page content, and the flag tag to find the results, highlighting the results, 5. Depending on the number of search results, determine the content and position offset of the message, locate and display the prompt information accurately. Please see the specific code:   Code as follows: $ (function () {      ...      var i = 0;     VAR scurtext;      Function highlight () {          clearselection ();//First clear. Last highlighted;            var flag = 0;          var bstart = True;&nbs P           $ (' #tip '). Text (');          $ (' #tip '). Hide ();    &N Bsp     var searchtext = $ (' #searchstr '). Val ();          var _searchtop = $ (' #searchstr '). O Ffset () .top+30;          var _searchleft = $ (' #searchstr '). Offset () .left;      &N Bsp   if ($.trim (searchtext) = "") {              showtips ("Please enter find station name", _searchtop,3,_ Searchleft);              return;         }    &NBS P    //Find matching           var searchtext = $ (' #searchstr '). Val ()//Get the keyword you entered;    &N Bsp   &NBSp var regExp = new RegExp (SearchText, ' g ');//create regular expression, G represents global if not g,                &N Bsp   If you find the first one, you won't continue looking down.;          var content = $ ("#content"). Text ();      &NBS P   if (!regexp.test (content)) {              Showtips ("No stations to find", _searchtop,3,_ Searchleft);              return;         } else {  &nbs P           if (scurtext!= searchtext) {                &N Bsp i = 0;                  Scurtext = searchtext;        &NB Sp      }         }         //Highlight       &NB Sp   $ (' P '). each (function () {              var html = $ (this). html ();    &nbsp        //will find the keyword replacement, plus highlight properties;              var newhtml = html. Replace (REGEXP, ' <span class= "highlight" > ' +searchtext+ ' </span> ');              $ (this). html (newhtml);/update;              flag = 1;      &N Bsp  });           //positioning and prompting information           if (flag = 1) {  &NB Sp           if ($ (". Highlight"). Size () > 1) {              &N Bsp   var _top = $ (". Highlight"). EQ (i)-offset (). top+$ (". Highlight"). EQ (i). Height ();                  var _tip = $ (". Highlight"). EQ (i)-parent (). Find ("strong"). Text ();        & nbsp         if (_tip== "") _tip = $ (". Highlight"). EQ (i). Parent (), parent (). Find ("strong"). Text ();  & nbsp   &NBSp           var _left = $ (". Highlight"). EQ (i). Offset () .left;          &NBS P       var _tipwidth = $ ("#tip"). Width ();                  if ( _left > $ (document). Width ()-_tipwidth) {                       _left = _left-_tipwidth;                 }      &NBSP ;           $ ("#tip"). HTML (_tip). Show ();                &NB Sp $ ("#tip"). Offset ({top: _top, Left: _left});                  $ ("#search_btn "). Val (" Find Next ");             }else{              &N Bsp   var _top = $ (". Highlight"). Offset (). top+$ (". Highlight"). Height ();                 var _tip = $ (". Highlight"). Parent (). Find ("strong"). Text ();                & nbsp var _left = $ (". Highlight"). Offset () .left;                  $ (' #tip '). Show ()                   $ ("#tip"). HTML (_tip). Offset ({top: _top, Left: _left}); &nb Sp            }              $ ("html, Body"). Animate ({Scro Lltop: _top-50});              i++;              if (I > $ (". Highlight"). Size ()-1 {                  i = 0;             }         }     }        ... });      The clearselection () function mentioned in the preceding code is used to clear the highlighting, the code reads as follows:      code is as follows: function ClearSelection () {  &NBsp       $ (' P '). each (function () {             //Find elements of all highlight attributes;              $ (this). Find ('. Highlight '). each (function () {          & nbsp       $ (this). ReplaceWith ($ (this). html ());//Remove their attributes;             });          }); }      Last added the Showtips () function, which is used to display the search results prompt after the input lookup keyword.      code as follows: $ (function () {      var tipsdiv = ' <div class= ' tipsclass ' ></div> '; nbsp     $ (' body ') append (tipsdiv);      function showtips (tips, height, time,left) {  &nbs P       var windowwidth = document.documentElement.clientWidth;           $ ('. Tipsclass '). Text (Tips);          $ (' Div.tipsclass '). CSS ( {          ' top ': Height + ' px ',          ' left ': Left + ' px ',      ,     ' position ': ' absolute ',           ' padding ': ' 8px 6px ',         ' background ': ' #000000 ',     &NB Sp     ' font-size ': + ' px '           ' font-weight ': 900,        & nbsp ' Margin ': ' 0 auto ',           ' text-align ': ' Center ',      ,     ' width ' : ' Auto ',           ' color ': ' #fff ',      ,     ' Border-radius ': ' 2px ',           ' opacity ': ' 0.8 ',          ' Box-shadow ': ' 0px 0px 10px #000 ',           '-moz-box-shadow ': ' 0px 0px 10px #000 ',          '-webkit-box-s Hadow ': ' 0px 0px 10px #000 '          } '. Show ();           settimeout (function () {$ (' diV.tipsclass '). fadeout ();}, (Time * 1000));      }  });