$(function () { | |
$("#search_box").fixDiv({ top: 0 }); | |
$('#searchstr').keydown(function (e) { | |
var key = e.which; | |
if (key == 13) highLignt(); | |
}) | |
$("#search_btn").click(highLignt); | |
var i = 0; | |
var sCurText; | |
function highLignt() { | |
clearSelection(); | |
var flag = 0; | |
var bStart = true; | |
$('#tip').text(''); | |
$('#tip').hide(); | |
var searchText = $('#searchstr').val(); | |
if ($.trim(searchText) != "" && flag == 0) { | |
var regExp = new RegExp(searchText, 'g'); | |
var oSearchText = $('#pretime').text() | |
if (!regExp.test(oSearchText)) { | |
$("#search_btn").val("页内查找"); | |
alert("没有找到要查找的车站"); | |
//console.log("没有"); | |
return; | |
} else { | |
if (sCurText != searchText) { | |
i = 0; | |
sCurText = searchText; | |
} | |
//console.log(i) | |
} | |
$('#pretime p').each(function () { | |
var html = $(this).html(); | |
var _time = $(this).parent().find("strong").text(); | |
var newHtml = html.replace(regExp, '<span class="highlight">' + searchText + '</span>'); | |
$(this).html(newHtml); | |
flag = 1; | |
}) | |
} | |
if (flag == 1) { | |
$(".highlight").removeClass("prelight"); | |
if ($(".highlight").size() > 1) { | |
var _top = $(".highlight").eq(i).offset().top+$(".highlight").eq(i).height(); | |
var _left = $(".highlight").eq(i).offset().left; | |
var _tipWidth = $("#tip").width(); | |
//console.warn($(document).width() + "|" + $("#tip").width()); | |
if (_left > $(document).width() - _tipWidth) { | |
_left = _left - _tipWidth; | |
} | |
$(".highlight").eq(i).addClass("prelight"); | |
var _tip = $(".highlight").eq(i).parent().find("strong").text(); | |
$('#tip').show(); | |
$("#tip").html(_tip).offset({ top: _top, left: _left }); | |
$("#search_btn").val("查找下一个"); | |
} else { | |
var _top = $(".highlight").offset().top+$(".highlight").height(); | |
var _tip = $(".highlight").parent().find("strong").text(); | |
var _left = $(".highlight").offset().left; | |
$('#tip').show(); | |
$("#tip").html(_tip).offset({ top: _top, left: _left }); | |
} | |
$("html, body").animate({ scrollTop: _top - 50 }); | |
i++; | |
if (i > $(".highlight").size() - 1) { | |
i = 0; | |
} | |
} | |
} | |
function clearSelection() { | |
$("#pretime p").each(function () { | |
$(this).find('.highlight').each(function () { | |
$(this).replaceWith($(this).html()); | |
}); | |
}); | |
} | |
}) |
<div id="search_box" align="right"> | |
<div> <input class="textbox" id="searchstr" type="text" size="10" name="searchstr" /> <input class="sbttn" id="search_btn" type="button" value="页内查找" /> </div> | |
</div> |