Examples of jquery web page search

Examples of jquery web page search

When you need to search for a keyword on the page, you can use the search function of the browser, and you can use the front-end script to find and locate the keyword accurately, this article describes the page content search and locating function implemented by jQuery, and displays the searched information in an extended manner.

This article takes the station name search as an example to look for the effect of the station ticket time page on the official website of imitation 12306. When a user enters a keyword and clicks the search button or presses the Enter key, jQuery matches the content with the regular expression to match the keyword accurately, quickly scroll the page to the first matching position and display the relevant information (in this example, the additional information is the station start time ).

 

HTML

 

You need to put an input box on the page to enter the keyword you want to search for and a search button, and then the subject content # content, which contains n <p>, that is, the name of the station where the ticket is to be sold in each time period.

The Code is as follows:

<Div id = "search_box">

<Input class = "textbox" id = "searchstr" type = "text" size = "10" name = "searchstr"/>

<Input class = "sbttn" id = "search_btn" type = "button" value = "intra-page search"/>

</Div>

<Div id = "content">

<P> <strong> station sold at </strong> <br/>

Anyang, Baicheng, Beijing West, Chengdu East, Daqing, Daqing west, Dongguan, Dongguan east, Huizhou, jinhuanan, zhuyun, Jiujiang, Lanzhou, Lishui, Linfen, Nanchong,

Qiqihar, Qingtian, Rizhao, Shanhaiguan, Shantou, Songyuan, Wenzhou, Ulan haot, Urumqi, Wuchang, Wuyi, Xi'an, Yongkang, Yuncheng. </P>

... N p is omitted here

</Div>

 

 

CSS

 

Simple CSS settings for the page content, where. highlight and # tip are used to set the style effects of the search results highlighted and the information prompt box, which will be introduced later.

 

The Code is 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 need to implement a fixed div effect, that is, when the page is scroll down, the input boxes and buttons used for searching are always fixed at the top of the page to facilitate further search.

 

The Code is 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 ().

 

The Code is as follows:

$ (Function (){

$ ("# Search_box"). fixDiv ({top: 0 });

});

 

 

Next, the most important feature is to implement the search function. After entering the keyword, click the search button or press the Enter key to call the search function highlight ().

 

The Code is as follows:

$ (Function (){

...

$ ('# Search_btn'). click (highlight); // when you click search, run the highlight function;

$ ('# Searchstr'). keydown (function (e ){

Var key = e. which;

If (key = 13) highlight ();

})

...

});

 

 

There are many things to do in the function highlight (), 1. clear the last highlighted content, 2. hide and clear the prompt information. 3. determines whether the input content is empty. 4. obtain the entered keyword, perform regular match with the page content, and use the flag to mark the result to highlight the result. determine the content and location offset of the prompt information based on the number of search results, locate the information accurately, and display the prompt information. See the specific code:

 

The Code is as follows:

$ (Function (){

...

Var I = 0;

Var sCurText;

Function highlight (){

ClearSelection (); // first clear the content highlighted last time;

 

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 ("enter the station name to search", _ searchTop, 3, _ searchLeft );

Return;

}

// Search for matching

Var searchText = $ ('# searchstr'). val (); // obtain the keyword you entered;

Var regExp = new RegExp (searchText, 'G'); // create a regular expression. g indicates global expression. If g is not used,

// The first one will not be searched down;

Var content = $ ("# content"). text ();

If (! RegExp. test (content )){

ShowTips ("no station is found", _ searchTop, 3, _ searchLeft );

Return;

} Else {

If (sCurText! = SearchText ){

I = 0;

SCurText = searchText;

}

}

// Highlight

$ ('P'). each (function (){

Var html = require (this).html ();

// Replace the keyword found with the highlight attribute;

Var newHtml = html. replace (regExp, '<span class = "highlight">' + searchText + '</span> ');

Optional (this).html (newHtml); // update;

Flag = 1;

});

 

// Locate and prompt 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 above code is used to clear the highlighted effect. The Code is as follows:

 

The Code is as follows:

Function clearSelection (){

$ ('P'). each (function (){

// Find all the elements of the highlight attribute;

$ (This). find ('. highlight'). each (function (){

Certificate (this%.replacewith(%(this%.html (); // remove their attributes;

});

});

}

 

 

Add the showTips () function to display the prompt information of the search result after the keyword is entered.

 

The Code is as follows:

$ (Function (){

Var tipsDiv = '<div class = "tipsClass"> </div> ';

$ ('Body'). append (tipsDiv );

Function showTips (tips, height, time, left ){

Var export wwidth = document.doc umentElement. clientWidth;

$ ('. TipsClass'). text (tips );

$ ('Div. tipsClass 'examples .css ({

'Top': height + 'px ',

'Left': left + 'px ',

'Position': 'absolute ',

'Padding': '8px 6px ',

'Background': '#000000 ',

'Font-size': 14 + 'px ',

'Font-weight': 900,

'Marggin': '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 ));

}

});