使用js实现前端内容实时搜索

　　本文主要基于项目的一个基本搜索功能，前端显示所有用户的在线评论信息；用户可以

根据需要在搜索框中输入搜索关键字，实时搜索出相应的显示结果，并高亮显示。

实现代码：

 /**             

* @brief 搜索一条房间中的符合要求的发言             

* @param $keyword 搜索的关键字                                    

*/            

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(100, 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) {                     //删除上一次匹配并高亮显示的结果                    

$.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) {                     //遍历整个chat内容，寻找到匹配的字符串高亮显示                    

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‘);                

}            

}

            /* 搜索工作结束 */