使用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');
                }
            }

            /* 搜索工作结束 */