标签：des style 使用 io ar cti 代码 html 工作
本文主要基于项目的一个基本搜索功能，前端显示所有用户的在线评论信息；用户可以
根据需要在搜索框中输入搜索关键字，实时搜索出相应的显示结果，并高亮显示。
实现代码：
/**
* @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‘);
}
}
/* 搜索工作结束 */
标签：des style 使用 io ar cti 代码 html 工作
原文地址：http://www.cnblogs.com/lds2014/p/3935879.html
