我正在进行文本的搜索功能。我正面临一个问题,实际上我第一次搜索它工作正常。但是当我再次搜索并按搜索时,它显示前一个搜索突出显示的文本。没有显示搜索文本如何解决这个问题。 这是我的代码。 http://jsfiddle.net/ravi1989/z7fjW/143/
function searchAndHighlight(searchTerm, selector) {
if(searchTerm) {
//var wholeWordOnly = new RegExp("\\g"+searchTerm+"\\g","ig"); //matches whole word only
//var anyCharacter = new RegExp("\\g["+searchTerm+"]\\g","ig"); //matches any word with any of search chars characters
var selector = selector || "#bodyContainer"; //use body as selector if none provided
var searchTermRegEx = new RegExp(searchTerm,"ig");
var matches = $(selector).text().match(searchTermRegEx);
if(matches) {
$('.highlighted').removeClass('highlighted'); //Remove old search highlights
$(selector).html($(selector).html().replace(searchTermRegEx, "<span class='match'>"+searchTerm+"</span>"));
$('.match:first').addClass('highlighted');
$('#next').on('click',i=1, function()
{ alert(i);
$('.match').removeClass('highlighted'); $('.match').eq(i).addClass('highlighted');
i=i+1;
k=i-2;
alert(i);
});
$('#previous').on('click',k=1, function()
{ alert(k);
$('.match').removeClass('highlighted'); $('.match').eq(k).addClass('highlighted');
k=k-1;
i=k+2;
});
if($('.highlighted:first').length) { //if match found, scroll to where the first one appears
$(window).scrollTop($('.highlighted:first').position().top);
}
return true;
}
}
return false;
}
$(document).ready(function() {
$('#search-button').on("click",function() {
if(!searchAndHighlight($('#search-term').val())) {
alert("No results found");
}
});
});
答案 0 :(得分:1)
在重新搜索之前,您应该删除搜索时为搜索突出显示的文本设置的所有类,否则这些类将保留:
$(".highlighted").removeClass("highlighted").removeClass("match");
小提琴:http://jsfiddle.net/z7fjW/144/
希望有所帮助