本文共 1453 字,大约阅读时间需要 4 分钟。
--- js 部分
var oldKey = "";
var index = -1;
var pos = new Array();//用于记录每个关键词的位置,以方便跳转
var posy = new Array();//用于记录每个关键词的位置,以方便跳转
var oldCount = 0;//记录搜索到的所有关键词总数
function previous(){
index--;
index = index < 0 ? oldCount - 1 : index;
search();
}
function next(){
index++;
//index = index == oldCount ? 0 : index;
if(index==oldCount){
index = 0 ;
}
search();
}
function search() {
$(".result").removeClass("res");//去除原本的res样式
var key = $("#key").val(); //取key值
if (!key) {
$(".result").each(function () {//恢复原始数据
$(this).replaceWith($(this).html());
});
oldKey = "";
return; //key为空则退出
}
if (oldKey != key) {
//重置
index = 0;
$(".result").each(function () {
$(this).replaceWith($(this).html());
});
pos = new Array();
posy = new Array();
var regExp = new RegExp(key+'(?!([^)', 'ig');//正则表达式匹配
$("body").html($("body").html().replace(regExp, "" + key + "")); // 高亮操作
$("#key").val(key);
oldKey = key;
$(".result").each(function () {
pos.push($(this).offset().top);
posy.push($(this).offset().left);
});
oldCount = $(".result").length;
}
$(".result:eq(" + index + ")").addClass("res");//当前位置关键词改为红色字体
$("body").scrollTop(pos[index]);//跳转到指定位置
window.scrollTo(0,pos[index]-500);
}
---css 部分
.res {
color: Red;
}
.result {
background: yellow;
}
--- JSP 部分
placeholder="查找姓名、网点"
style="width: 100px; text-align: right; font-size: 14px;" />
type="button" value="下一个" οnclick="next()"
style="font-size: 14px;" />
οnclick="previous()" style="font-size: 14px;" />
转载地址:http://olatv.baihongyu.com/