今天分享下”前端页面如何设置好查找栏功能“这篇文章，文中根据实例编码详细介绍，或许对大家的编程之路有着一定的参考空间与使用价值，需要的朋友接下来跟着云南仟龙Mark一起学习一下吧。近期在搞一个被很多人改了的架构，天天看高清编码看的头的晕了，但是觉得发展还很大的，自己做了一个后台管理可配备前台接待查询2个库不一样数据信息范畴的物品，还挺令人满意，那一天拿出来共享一下，今日先说一个近几天做的功能，便是html网页页面的搜索功能。
这一功能主要是完成在搜索框中键入字符，以后按后边的上一个下一个按键，会自行把查看地区内的匹配字符用特别的款式标识，以后能够再次按上一个下一个按键把依照次序访问匹配字符，并把当今匹配的字符用另一种款式与别的匹配字符多方面区别。
前台接待表明大约是这种模样：
html是这样：
<div class=”container” style=”z-index: 999″ id=”searchDiv”>
<div class=”keyword-search”>
查找：
<input id=”key” type=”text” style=”width: 200px;” placeholder=”关键词” />
<a href=”javascript:void(0);” class=”prev” onclick=’wordSearch(1)’><i class=”c-icon”></i></a>
<a href=”javascript:void(0);” class=”next” onclick=’wordSearch()’><i class=”c-icon”></i></a>
</div>
</div>
script代码：
<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 () {
(
t
h
i
s
)
.
r
e
p
l
a
c
e
W
i
t
h
(
(this).replaceWith(
(
t
h
i
s
)
.
r
e
p
l
a
c
e
W
i
t
h
(
(this).html( http://www.qlyl1688.com/products/ycxsys6152.html ));
});
pos0 = new Array();
if ($(“.contrast-wrap”).hasClass(“current”)) {
currentLength = $(“.current”).length;
$(“.current .contrast”).each(function () {
(
t
h
i
s
)
.
h
t
m
l
(
(this).html(
(
t
h
i
s
)
.
h
t
m
l
(
(this).html().replace(new RegExp(key, “gm”), “<span id=’result” + (index++) + “’ class=’result’>” + key + “</span>”)); // 替换
});
} else {
$(“.contrast-wrap”).addClass(‘current’);
currentLength = $(“.current”).length;
$(“.contrast”).each(function () {
(
t
h
i
s
)
.
h
t
m
l
(
(this).html(
(
t
h
i
s
)
.
h
t
m
l
(
(this).html().replace(new RegExp(key, “gm”), “<span id=’result” + (index++) + “’ class=’result’>” + key + “</span>”)); // 替换
});
}
//$(“#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 () {
(
t
h
i
s
)
.
r
e
p
l
a
c
e
W
i
t
h
(
(this).replaceWith(
(
t
h
i
s
)
.
r
e
p
l
a
c
e
W
i
t
h
(
(this).html());
});
oldKey0 = “”;
}
});
</script>
下面记一下完成基本原理：
最先先把上一次的查找結果消除掉，随后依据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()方法：回到或设定匹配元素的下拉列表的竖直部位。
总结
以上是云南仟龙Mark给大家介绍的所有内容,希望对大家有所帮助，如果大家有任何疑问请在脚本之家留言，如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！