jquery Implementation page lookup features sample sharing _jquery

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

Page needs 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>, that is, each time the ticket sales station name.

Copy Code 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 lookup"/>
</div>
<div id= "Content" >
<P><STRONG>8:00 to sell the 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>
.... n P is omitted here
</div>

Css

Simple CSS settings for page content, where. Highlight and #tip are used to set the style effects of the search results highlighting and the message box display, which we'll show later.

Copy Code 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 a fixed div effect, that is, when the page scrolling down, the search for the input boxes and buttons are always fixed at the top of the page, easy to continue to find.

Copy Code code as follows:

(function ($) {
$.fn.fixdiv = function (options) {
var defaultval = {
Top:10
};
var obj = $.extend (defaultval, Options);
$this = this;
var _top = $this. Offset (). Top;
var _left = $this. Offset (). Left;
$ (window). Scroll (function () {
var _currenttop = $this. Offset (). Top;
var _scrolltop = $ (document). ScrollTop ();
if (_scrolltop > _top) {
$this. Offset ({
Top: _scrolltop + obj.top,
Left: _left
});
} else {
$this. Offset ({
Top: _top,
Left: _left
});
}
});
return $this;
};
}) (JQuery);

Next, we call Fixdiv ().

Copy Code code as follows:

$ (function () {
$ ("#search_box"). Fixdiv ({top:0});
});

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 ().

Copy Code code as follows:

$ (function () {
...
$ (' #search_btn '). Click (highlight);//When clicking Search, execute the Highlight function;
$ (' #searchstr '). KeyDown (function (e) {
var key = E.which;
if (key = =) highlight ();
})
...
});

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, matches the page content, and finds the result with the flag tag, highlighting the search results. 5. According to the number of search results, determine the content of the message and position offset, accurate positioning and display the hint information. Please see the specific code:

Copy Code code as follows:

$ (function () {
...
var i = 0;
var Scurtext;
function Highlight () {
ClearSelection ()//First clear the last highlighted content;

var flag = 0;
var bstart = true;

$ (' #tip '). Text (');
$ (' #tip '). Hide ();
var SearchText = $ (' #searchstr '). Val ();
var _searchtop = $ (' #searchstr '). Offset (). top+30;
var _searchleft = $ (' #searchstr '). Offset (). Left;
if ($.trim (searchtext) = = "") {
Showtips ("Please input to find the station name", _searchtop,3,_searchleft);
Return
}
Find matches
var SearchText = $ (' #searchstr '). Val ();//Get the keyword you entered;
var regExp = new RegExp (SearchText, ' g ');//create regular expression, G represents global, if not G,
Then find the first one will not continue looking down;
var content = $ ("#content"). Text ();
if (!regexp.test (content)) {
Showtips ("Did not find the station to find", _searchtop,3,_searchleft);
Return
} else {
if (Scurtext!= searchtext) {
i = 0;
Scurtext = SearchText;
}
}
Highlight Display
$ (' P '). each (function () {
var html = $ (this). html ();
Replace the keyword found, plus the highlight attribute;
var newhtml = html.replace (RegExp, ' <span class= ' highlight ' > ' +searchtext+ ' </span> ');
$ (this). html (newhtml);//update;
flag = 1;
});

Locate and prompt for information
if (flag = = 1) {
if ($ (". Highlight"). Size () > 1) {
var _top = $ (". Highlight"). EQ (i)-offset (). top+$ (". Highlight"). EQ (i). Height ();
var _tip = $ (". Highlight"). EQ (i)-parent (). Find ("strong"). Text ();
if (_tip== "") _tip = $ (". Highlight"). EQ (i)-parent (). Parent (). Find ("strong"). Text ();
var _left = $ (". Highlight"). EQ (i)-offset (). Left;
var _tipwidth = $ ("#tip"). width ();
if (_left > $ (document). Width ()-_tipwidth) {
_left = _left-_tipwidth;
}
$ ("#tip"). HTML (_tip). Show ();
$ ("#tip"). Offset ({top: _top, Left: _left});
$ ("#search_btn"). Val ("Find Next");
}else{
var _top = $ (". Highlight"). Offset (). top+$ (". Highlight"). Height ();
var _tip = $ (". Highlight"). Parent (). Find ("strong"). Text ();
var _left = $ (". Highlight"). Offset (). Left;
$ (' #tip '). Show ();
$ ("#tip"). HTML (_tip). Offset ({top: _top, Left: _left});
}
$ ("HTML, Body"). Animate ({scrolltop: _top-50});
i++;
if (I > $ (". Highlight"). Size ()-1) {
i = 0;
}
}
}
...
});

The ClearSelection () function mentioned in the preceding code clears the highlighting, and the code reads as follows:

Copy Code code as follows:

function ClearSelection () {
$ (' P '). each (function () {
Finds elements of all highlight attributes;
$ (this). Find ('. Highlight '). each (function () {
$ (this). ReplaceWith ($ (this). html ());//remove their attributes;
});
});
}

Finally, add the Showtips () function, which is used to display the search results prompt after the input lookup keyword.

Copy Code code as follows:

$ (function () {
var tipsdiv = ' <div class= ' tipsclass ' ></div> ';
$ (' body '). Append (Tipsdiv);
function showtips (tips, height, time,left) {
var windowwidth = document.documentElement.clientWidth;
$ ('. Tipsclass '). Text (tips);
$ (' Div.tipsclass '). CSS ({
' Top ': Height + ' px ',
' Left ': Left + ' px ',
' Position ': ' absolute ',
' Padding ': ' 8px 6px ',
' Background ': ' #000000 ',
' font-size ': + ' px ',
' Font-weight ': 900,
' 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-shadow ': ' 0px 0px 10px #000 '
). Show ();
settimeout (function () {$ (' Div.tipsclass '). fadeout ();}, (Time * 1000));
}
});