html页面的查找功能主要是实现在查找框内输入字符,下面通过本文给大家分享html页面的查找功能,需要的朋友参考下吧
最近在搞一个被很多人改了的框架,天天看代码看的头的晕了,不过感觉进步还挺大的,自己做了一个后台可配置前台查看两个库不同数据范围的东西,还挺满意,那天拿出来分享一下,今天先说一个这几天做的功能,就是html页面的查找功能。
这个功能主要是实现在查找框内输入字符,之后按后面的上一个下一个按钮,会自动把查询区域内的匹配字符用特殊的样式标记,之后可以继续按上一个下一个按钮把按照顺序浏览匹配字符,并把当前匹配的字符用另一种样式与其他匹配字符加以区别。
前台显示大概是这个样子:
html是这样:
查找:
script代码:
var oldKey0 = "";
var index0 = -1;var oldCount0 = 0;
var newflag = 0;
var currentLength = 0;
function wordSearch(flg) {
var key = $("#key").val(); //取key值
if (!key) {
return; //key为空则退出
}
getArray();
focusNext(flg);
}
function focusNext(flg) {
if (