php查询框,html查找框功能
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 (newflag == 0) {//如果新搜索,index清零
index0 = 0;
}
if (!flg) {
if (oldCount0 != 0) {//如果还有搜索
if (index0 < oldCount0) {//左边如果没走完,走左边
focusMove(index0);
index0++;
} else if (index0 == oldCount0) {//都走完了
index0 = 0;
focusMove(index0);
index0++;
}
else {
index0 = 0;//没确定
focusMove(index0);
index0++;
}
}
} else {
if (oldCount0 != 0) {//如果还有搜索
if (index0 <= oldCount0 && index0 > 0) {//左边如果没走完,走左边
index0--;
focusMove(index0);
} else if (index0 == 0) {//都走完了
index0 = oldCount0;
index0--
focusMove(index0);
}
}
}
}
function getArray() {
newflag = 1;
$(".contrast .result").removeClass("res");
var key = $("#key").val(); //取key值
if (!key) {
oldKey0 = "";
return; //key为空则退出
}
if (oldKey0 != key || $(".current").length != currentLength) {
//重置
index0 = 0;
var index = 0;
$(".contrast .result").each(function () {
$(this).replaceWith($(this).html());
});
pos0 = new Array();
if ($(".contrast-wrap").hasClass("current")) {
currentLength = $(".current").length;
$(".current .contrast").each(function () {
$(this).html($(this).html().replace(new RegExp(key, "gm"), "" + key + "")); // 替换
});
} else {
$(".contrast-wrap").addClass('current');
currentLength = $(".current").length;
$(".contrast").each(function () {
$(this).html($(this).html().replace(new RegExp(key, "gm"), "" + key + "")); // 替换
});
}
//$("#key").val(key);
oldKey0 = key;
//$(".contrast .result").each(function () {
// $(this).parents('.contrast-wrap').addClass('current');
// pos0.push($(this).offset().top);
//});
// pos0.push($(".contrast .result:eq(2)").offset().top - $(".contrast .result:eq(2)").parents(".contrast").offset().top);
oldCount0 = $(".contrast .result").length;
newflag = 0;
}
}
function focusMove(index0) {
$(".contrast .result:eq(" + index0 + ")").parents('.contrast-wrap').addClass('current');
$(".contrast .result:eq(" + index0 + ")").addClass("res");
var top = $(".contrast .result:eq(" + index0 + ")").offset().top + $(".contrast .result:eq(" + index0 + ")").parents(".contrast").scrollTop();
var intop = top - $(".contrast .result:eq(" + index0 + ")").parents(".contrast").offset().top;
$(".contrast .result:eq(" + index0 + ")").parents(".contrast").animate({ scrollTop: intop }, 200);
if ($(".contrast .result:eq(" + index0 + ")").parents(".contrast").scrollTop() == 0) {
$("html, body").animate({ scrollTop: top - 200 }, 200);
} else {
$("html, body").animate({ scrollTop: $(".contrast .result:eq(" + index0 + ")").parents(".contrast").offset().top - 200 }, 200);
}
}
$('#key').change(function () {
if ($('#key').val() == "") {
index0 = 0;
$(".contrast .result").each(function () {
$(this).replaceWith($(this).html());
});
oldKey0 = "";
}
});
接下来记一下实现原理:
首先先把上一次的查询结果清除掉,然后根据key的值,用正则表达式把区域内所有匹配的字符全都加上特殊的样式,比如方法中就全部加了一个类名为result的span标签,用odKey0变量记录key的值(下次再进入先比较如果一样的话说明是要看下一个或者上一个的内容,就不用在进入用正则表达式匹配了),oldCount0记录总共查询出来的个数,newflag置0(如果不是初次查询newflag为1)。
接着进入getNext方法,flg表示用户按下的是上一个还是下一个按钮,用index0记录当前查看的是哪一个匹配字符,与oldCount0比较,确定是递增或递减还是置0(如果大于oldCount0或者小于0,就要重新开始)。
focusMove方法就是使页面定位到当前元素的操作。
学到的jquery方法:
eq() 选择器:选择器选取带有指定 index 值的元素。例如:$(".contrast .result:eq(1)"),就是选择类名contrast元素中的第二个类名为result的元素。
parents()方法:元素的所有父元素。$("p").parents('.contrast-wrap'),p元素所有类名为contrast-wrap的元素。
replace()方法:用指定的html内容替换被选元素,注意是把被选元素的元素也替换掉。
offset()方法:返回或设置匹配元素相对于文档的偏移(位置)。
scrollTop()方法:返回或设置匹配元素的滚动条的垂直位置。
总结:以上就是本篇文的全部内容,希望能对大家的学习有所帮助。
相关推荐:
php查询框,html查找框功能相关推荐
- 搜索和查询html代码,html查找框功能
html页面的查找功能主要是实现在查找框内输入字符,下面通过本文给大家分享html页面的查找功能,需要的朋友参考下吧 最近在搞一个被很多人改了的框架,天天看代码看的头的晕了,不过感觉进步还挺大的,自己 ...
- python字典实现关键字检索_如何实现搜索框的关键词提示功能
我们都使用过主流的搜索引擎,谷歌. bing,当然还有搜狗.百度之类.当你搜索某一关键词时,它会贴心在下拉框补全一些热门关键词,像下图这样: 搜索关键词提示 你点击某一关键词,页面就直接跳转到结果页面 ...
- Python:在Pandas数据框中查找缺失值
How to find Missing values in a data frame using Python/Pandas 如何使用Python / Pandas查找数据框中的缺失值 介绍: (In ...
- 纯css写单选框和复选框的样式和功能
只用纯css写的单选框和复选框的样式和功能该怎么写?看这里,复制下面的代码运行一遍就知道了,快试试吧! 效果截图: <!doctype html> <html lang=" ...
- ios 裁剪框大小_iOS实现裁剪框和图片剪裁功能
这篇文章主要为大家详细介绍了iOS实现裁剪框和图片剪裁功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下图片处理中经常用的图片剪裁,就是通过剪裁框确定图片剪裁的区域,然后剪去该区域的图片,今天实现 ...
- JS 原生实现复选框全选反选功能
** JS 原生实现复选框全选反选功能 ** 按钮功能实现思路: 全选按钮: 直接将全选按钮的状态赋值给每一个 复选框. 复选框:只有当所有的复选框选中时,全选按钮才能选中,所以每当复选框每点击一次就 ...
- 直播网站程序源码,搜索框实现快速搜索功能
直播网站程序源码,搜索框实现快速搜索功能 module.exports = async function (params, context) {const db = context.databasec ...
- android自定义搜索栏,Android自定义View实现搜索框(SearchView)功能
概述 在Android开发中,当系统数据项比较多时,常常会在app添加搜索功能,方便用户能快速获得需要的数据.搜索栏对于我们并不陌生,在许多app都能见到它,比如豌豆荚 在某些情况下,我们希望我们的自 ...
- Android 10.0 系统设置蓝牙配对时去掉配对框实现直接配对功能
目录 1.概述 2.系统设置蓝牙配对时去掉配对框实现直接配对功能核心代码
最新文章
- 物理化学 焓变的计算和相变焓
- Mongodb的集合插入一个字段
- java json.stringify_JavaScript如何实现JSON.stringify
- maple 假设_Maple常用计算命令..
- java 时钟 算法分析_java实现时钟方法汇总
- 【C++深度剖析教程26】父子间的冲突
- 单机 搭建kafka集群 本地_10分钟搭建单机Kafka集群
- Oulipo(Hash入门第一题 Hash函数学习)
- 曝荣耀仍未获得谷歌Android授权;诋毁鸿蒙的OPPO员工离职;微信圈子将停止运营|极客头条...
- 小乐乐与二段数(2019哈理工新生赛第20题)
- c语言写乘法表代码解读,C语言输出九九乘法表代码及解析
- MySQL 字符串拼接 - 多种字符串拼接实战案例
- 从零开始学OpenCV(一)——OpenCV的安装
- Apache Kafka核心组件和流程-协调器(消费者和组协调器)-设计-原理(入门教程轻松学)
- 大神如何用油猴提升前端开发效率 ?
- 阿里云网盘:阿里云盘公测预约中,附官网地址入口
- 测试2年6.5K,每天“911”,我的心酸经历只有我自己知道···
- html模态框插件,如何使用JavaScript构建模态框插件
- 取模运算的理解和应用
- 豆瓣电影评分分析(数据分析)