Real-time search with JS for front-end content

This article is based on a basic search function of the project, the front-end display all users online comment information; users can

Enter search keywords in the search box as needed, search for the corresponding display results in real time, and highlight them.

Implementation code:

/**

* @brief Search for a meeting in a room to meet the requirements of the speech

* Keywords @param $keyword search

*/

var isskip = false;

$ ('. Search-icon '). Click (function () {

Showsearch ();

});

function Showsearch () {

$ ('. Search-content '). addclass (' Bounce '). Slidedown (' Fast ', function () {

$ ('. Present-line-gray-whole '). addclass (' present-line-gray-whole-hide ');

$ ('. Search-content input '). focus ();

});

}

$ ('. Delete-icon '). Click (function () {

Hidesearch ();

});

function Hidesearch () {

$ ('. Present-line-gray-whole '). Removeclass (' present-line-gray-whole-hide ');

$ ('. Search-content '). Slideup (Backtoorigin);

$ ('. Talk-board-wrapper '). Animate ({scrolltop:0}, ' slow ');

$ ('. Search-content '). Removeclass (' bounce ');

Isskip = false;

}

$ ('. Search-content input '). KeyUp (function (e) {

$ ('. No-match-chat '). Removeclass (' No-match-chat-change ');

$ ('. Talk-board-wrapper '). scrolltop (0);

if ($ ('. Search-content input '). val ()! = ") {

$ ('. Search-content input '). CSS (' border-bottom ', ' 1px solid rgb (255,209,37) ');

$ (' #search-img '). Trigger (' click ');

} else {

$ ('. Search-content input '). CSS (' border-bottom ', ' 1px solid rgb (65,65,65) ');

$ ('. Talk-board-container. Chat-item '). Show ();

Removelasthighlightresult ();

}

});

$ ('. Talk-board-container '). On (' click ', '. Chat-item ', Chatitemclick);

function Chatitemclick () {

var ItemIndex;

ItemIndex = $ (this). index ();

if (Isskip) {

Backtoorigin ();

Skiptodest (ItemIndex);

}

Isskip = false;

}

function Skiptodest (itemIndex) {

var scrolllength;

Scrolllength = parseint ($ ('. Ps-scrollbar-y-rail '). CSS (' top ') + $ ('. Talk-board-container. Chat-item '). EQ (itemIndex) . Offset (). top-75;

$ ('. Talk-board-wrapper '). Animate ({scrolltop:scrolllength}, ' slow ');}

function Backtoorigin () {

$ ('. Search-content input '). Val ('). CSS (' border-bottom ', ' 1px solid rgb (65,65,65) ');

$ ('. Talk-board-container. Chat-item '). Show ();

$ ('. No-match-chat '). Removeclass (' No-match-chat-change ');

Removelasthighlightresult ();

}

$ (' #search-img '). On (' click ', function () {

Isskip = true;

$ ('. Talk-board-container. Chat-item '). Hide ();

Removelasthighlightresult ();

Marksearchresult ();

});

function Removelasthighlightresult () {

var $searchElement,

AppendText;

$searchElement = $ ('. Chat-content p '). Find (' i '). length?

$ ('. Chat-content p '). Find (' i '): ';

if ($searchElement. Length) {//delete last match and highlight results

$.each ($searchElement, function (index, content) {

AppendText = $ (content). text ();

$ (content). After (AppendText). Remove ();

});

}

}

function Marksearchresult () {

var SearchResult = False,

Keyword = $ (' #search-content-input '). Val (),

MATCHSTR,

$a,

$span,

$chatContent;

$chatContent = $ ('. Chat-content p ');

if (keyword = = = ") {

$ ('. No-match-chat '). addclass (' No-match-chat-change ');

Return

}

$.each ($chatContent, function (index, content) {//iterate through the entire chat content, looking for matching string highlighting

if (content). Text (). INDEXOF (keyword, 0)!==-1) {

$ (content). Parents ('. Chat-item '). Show ();

SearchResult = ' true ';

if (content). Find (' a '). Length) {

MATCHSTR = $ (content). Find (' a '). Contents (). filter (function () {

return This.nodetype = = 3;

}). text (). Replace (new REGEXP (keyword, ' g '), ' <i class= "text-background-highlight" > ' + keyword + ' </i> ');

$a =$ (content). Find (' a '). Clone ();

$span = $ (content). Find (' a span '). Clone ();

$ (content). HTML (content). Contents (). filter (function () {

return This.nodetype = = 3;

}). text (). Replace (new REGEXP (keyword, ' g '), ' <i class= "text-background-highlight" > ' + keyword + ' </i> '));

$ (content). prepend ($a);

$ (content). Find (' a '). html (MATCHSTR);

$ (content). Find (' a '). prepend ($span);

} else {

$ (content). HTML (

$ (content). Text (). Replace (new REGEXP (keyword, ' g '), ' <i class= "text-background-highlight" > ' + keyword + ' </i > '));

}

}

});

if (!searchresult) {

$ ('. No-match-chat '). addclass (' No-match-chat-change ');

}

}

/* Search Work Ends */

Real-time search with JS for front-end content