实现效果:
引入样式:
.res {
/*color: Red;*/
background: rgb(215, 48 ,48);
color: white;
}
.result {
background: yellow;
}
搜索框:
<div style="width: 600px;position: fixed;top: 50px;left: 20px;z-index: 999; id="search_key_dom_">
<input type="text" id="search_key">
<button id="search_btn" >搜索</button>
<button id="search_top" >上一个</button>
<button id="search_next">下一个</button>
<button id="search_cancle_">取消搜索</button>
</div>
<div id="window_content">
<!-- 待搜索的内容全部放在这个里面-->
</div>
//这里用requireJS引入js方法类
var searchPageUtil = require("js/common/searchUtilWindows");
//绑定事件
$("#search_btn").click(function () {
searchPageUtil.next(true);
document.getElementById('search_next').focus();
})
$("#search_top").click(function () {
searchPageUtil.previous();
document.getElementById('search_next').focus();
})
$("#search_next").click(function () {
searchPageUtil.next()
})
$("#search_cancle_").click(function () {
$("#search_key_dom_").hide();
$("#search_key").val("");
searchPageUtil.redisplay();
})
//搜索工具类,这里用的requireJS
define(["jquery"], function($) {
var oldKey = "";
var index = -1;
var pos = new Array();//用于记录每个关键词的位置,以方便跳转
var posy = new Array();//用于记录每个关键词的位置,以方便跳转
var oldCount = 0;//记录搜索到的所有关键词总数
var previous = function(){
index--;
index = index < 0 ? oldCount -