昨天，做了个页面搜索的功能，觉得在实际开发中应该比较有用，将代码贴出来供大家参考。将下面的代码拷到文本编辑器中，保存为html，用浏览器打开就可看到实际效果。在Opera, firefox, IE6下测试没问题。
这个功能的处理过程是：在一个div divCont中放入要显示的选项，给要检索的Label中加入了
forSearch="true"属性（这是个自定义属性），代码根据这个属性取得我们要检索的所有的Label（待检索内容为Label中的文本，我们通过innerHTML取得.），然后用我们要查询的字符串与取得的label内的文本进行比对，当找到含有我们要查询的字符串时，将这个Label背景设为绿色，同时记录第一个找到的 label，检索完毕后，将div
divCont的滚动条移到第一条检索结果出。
如何将这个功能推广到checkbox以外其它上面去呢？ 根据上面讲解，我们知道，检索依赖的主要是Label的forSearch="true"
属性和这个Label的innerHTML，所以，我们可以对我们要检索的标签加上
forSearch="true"属性，将要检索的内容置于该标签内即可。也就是说，这个检索事实是与标签没有关系的。
在实际项目中应用时，需要将下面要素添加到页面：
1.header部分的javascript,添加到你的页面的header部分；
2.name="words11"的文本框，onclick="searchInfor()的button;
3.待检索内容的容器<div id="divCont" style="border:1pt #BBCCC0 solid;height:232px;width:40%; overflow: auto; position:absolute"></div>, 这个可选，（但推荐加上，可以看起来比较美观点。）主要是为了实现滚动条效果，如果不加，就会取得整个body下面的指定标签；
4.
getCheckBoxText()函数，这个函数可以传入参数，指定要进行检索的标签类型，默认为label,当传入*时，它将认为整个页面(这一块有点不合理，应该是指定的div下面的所有标签才合适，但目前还没有找到比较好的可以快速获取div下面所有子节点的方法，不止第一层的，如果找到了，可以修改getElementsByAttribute的第一行代码来实现.)的所有加forSearch="true"的标签都要检索。
5.给你要检索的标签中添加
forSearch="true"属性；
6.将最末尾的javascript代码添加到你的页面的最末尾，千万不要放到header部分，负责divCont会取不到。
7.美化页面:)
这样，你的页面就可以具有一个页面搜索功能了.在使用过程中，如果有什么新发现，欢迎分享。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content="HTML Tidy for Windows (vers 14 February 2006), see www.w3.org" />
<title>
JavaScript Search
</title>
<script language="JavaScript" type="text/javascript">
//<![CDATA[
/**
* get elements by attribute
*/
function getElementsByAttribute(oElm, strTagName, strAttributeName, strAttributeValue){
var arrElements = (strTagName == "*" && document.all)? document.all : oElm.getElementsByTagName(strTagName);
var arrReturnElements = new Array();
var oAttributeValue = (typeof strAttributeValue != "undefined")? new RegExp("(^|\\s)" + strAttributeValue + "(\\s|$)") : null;
var oCurrent;
var oAttribute;
for(var i=0; i<arrElements.length; i++){
oCurrent = arrElements[i];
oAttribute = oCurrent.getAttribute(strAttributeName);
if(typeof oAttribute == "string" && oAttribute.length > 0){
if(typeof strAttributeValue == "undefined" || (oAttributeValue && oAttributeValue.test(oAttribute))){
arrReturnElements.push(oCurrent);
}
}
}
return arrReturnElements;
}
/**
* Global variables
*/
var refA ; /* the referance of container div. */
var scTop; /* the */
var hits = new Array(); /* hits' array */
/**
* clean input box while there is no query words inputed.
*/
function cleanInput(ref){
var sflag = generalForm.sflag.value;
if(sflag == '-1'){
ref.value = "";
}
}
/**
* reset Label' backcolor to default: white.
*/
function resetLableBackcolor(){
if(hits){
if(hits.length){
var len = hits.length;
for(var j = 0; j < len; j++){
hits[j].style.backgroundColor = "";
}
}
}
}
/*
* initialize input box
*/
function initInput(ref){
if(ref.value != '' && ref.value != "输入选项名查询"){
generalForm.sflag.value = "1";
} else {
generalForm.sflag.value = "-1";
}
if(ref.value == ''){
ref.value = "输入选项名查询";
resetLableBackcolor();
refA.scrollTop = scTop;
}
searchInfor();
}
/**
* get all tests to search by attribute forSearch.
* @param String tag type
*/
function getCheckBoxText(){
var olE = refA;
/* get all tests to search by attribute forSearch. */
var tag = "label";
if(arguments.length == 1){
tag = arguments[0];
}
var texts = getElementsByAttribute(olE, tag, "forSearch", "true");
return texts;
}
/**
* execute query , set backgroundcolor of hits to green, move scrollbar to the first hit.
*/
function searchInfor(){
var words = generalForm.words11.value;
/* get all tests to search by attribute forSearch. */
var texts = getCheckBoxText();
var firstChk;
var cnt = 0;
resetLableBackcolor();
if(texts){
if(texts.length){
var len = texts.length;
var flag = -1;
var ref ;
var textShow = "";
for(var i = 0; i < len; i++){
ref = texts[i];
textShow = ref.innerHTML;
flag = textShow.indexOf(words);
if(flag > -1){
/* set hits' backgroundColor to green. */
ref.style.backgroundColor = "#99FF66";
cnt = cnt + 1;
hits.push(ref);
if(cnt == 1){
firstChk = i; /* recode the first hit.*/
}
}
}
}
}
refA.scrollTop = scTop + firstChk*20; /* set scrolltop to show the first hit.*/
}
//]]>
</script>
</head>
<body leftmargin="30pt" rightmargin="0" topmargin="0" bottommargin="0">
<form name="generalForm" id="generalForm">
<input type="hidden" name="sflag" value="-1" />
<div width="40%" style="vertical-align:top;overflow:hidden;" >
<table width="40%" border="0" cellpadding="3" cellspacing="0" class="tableList" bordercolor="#CCCCCC" style="border-collapse:collapse">
<tr>
<td width="70%">
& nbsp; 选项:< br> </td>
<td align="right" width="20%">
<input name="words11" type="text" class="lightfont" value="输入选项名查询" onclick="cleanInput(this);" onblur="initInput(this);" />
</td>
<td width="10%">
<input type="button" value="搜索" onclick="searchInfor();" />
</td>
</tr>
</table>
</div>
<div id="divCont" style="border:1pt #BBCCC0 solid;height:232px;width:40%; overflow: auto; position:absolute">
<table width="97%" border="0" align="left" cellpadding="0" cellspacing="0" bordercolor="white" bgcolor="white">
<tr width="97%" rowspan="8" bgcolor="white">
<td>
<nobr><input name="chk" type="checkbox" id="chk2" value="2" /> <label forsearch="true" for="chk2">选项1</label></nobr>< br> </td>
</tr>
<tr width="97%" rowspan="8" bgcolor="white">
<td>
<nobr><input name="chk" type="checkbox" id="chk3" value="3" /> <label forsearch="true" for="chk3">选项2Text1</label></nobr>
</td>
</tr>
<tr width="97%" rowspan="8" bgcolor="white">
<td>
<nobr><input name="chk" type="checkbox" id="chk4" value="4" /> <label forsearch="true" for="chk4">选项3Text</label></nobr>< br> </td>
</tr>
<tr width="97%" rowspan="8" bgcolor="white">
<td>
<nobr><input name="chk" type="checkbox" id="chk5" value="5" /> <label forsearch="true" for="chk5">Lable 4Text4</label></nobr>
</td>
</tr>
<tr width="97%" rowspan="8" bgcolor="white">
<td>
<nobr><input name="chk" type="checkbox" id="chk6" value="6" /> <label forsearch="true" for="chk6">选项 5Text6</label></nobr>
</td>
</tr>
<tr width="97%" rowspan="8" bgcolor="white">
<td>
<nobr><input name="chk" type="checkbox" id="chk7" value="7" /> <label forsearch="true" for="chk7">选项 7Text中国</label></nobr>
</td>
</tr>
<tr width="97%" rowspan="8" bgcolor="white">
<td>
<nobr><input name="chk" type="checkbox" id="chk8" value="8" /> <label forsearch="true" for="chk8">选项8 Text1</label></nobr>
</td>
</tr>
<tr width="97%" rowspan="8" bgcolor="white">
<td>
<nobr><input name="chk" type="checkbox" id="chk9" value="9" /> <label forsearch="true" for="chk9">选项9 Text1</label></nobr>
</td>
</tr>
<tr width="97%" rowspan="8" bgcolor="white">
<td>
<nobr><input name="chk" type="checkbox" id="chk10" value="10" /> <label forsearch="true" for="chk10">选项10 Text1</label></nobr>
</td>
</tr>
<tr width="97%" rowspan="8" bgcolor="white">
<td>
<nobr><input name="chk" type="checkbox" id="chk11" value="11" /> <label forsearch="true" for="chk11">选项11 Text1</label></nobr>
</td>
</tr>
<tr width="97%" rowspan="8" bgcolor="white">
<td>
<nobr><input name="chk" type="checkbox" id="chk12" value="12" /> <label forsearch="true" for="chk12">选项12 Text1</label></nobr>
</td>
</tr>
<tr width="97%" rowspan="8" bgcolor="white">
<td>
<nobr><input name="chk" type="checkbox" id="chk13" value="13" /> <label forsearch="true" for="chk13">选项13 Text7771</label></nobr>
</td>
</tr>
<tr width="97%" rowspan="8" bgcolor="white">
<td>
<nobr><input name="chk" type="checkbox" id="chk14" value="14" /> <label forsearch="true" for="chk14">选项14Text1</label></nobr>
</td>
</tr>
<tr width="97%" rowspan="8" bgcolor="white">
<td>
<nobr><input name="chk" type="checkbox" id="chk15" value="15" /> <label forsearch="true" for="chk15">选项15Text1</label></nobr>
</td>
</tr>
<tr width="97%" rowspan="8" bgcolor="white">
<td>
<nobr><input name="chk" type="checkbox" id="chk16" value="16" /> <label forsearch="true" for="chk16">选项16Text1</label></nobr>
</td>
</tr>
<tr width="97%" rowspan="8" bgcolor="white">
<td>
<nobr><input name="chk" type="checkbox" id="chk17" value="17" /> <label forsearch="true" for="chk17">选项17 Text1</label></nobr>
</td>
</tr>
<tr width="97%" rowspan="8" bgcolor="white">
<td>
<nobr><input name="chk" type="checkbox" id="chk18" value="18" /> <label forsearch="true" for="chk18">Lable18 Text1</label></nobr>
</td>
</tr>
<tr width="97%" rowspan="8" bgcolor="white">
<td>
<nobr><input name="chk" type="checkbox" id="chk19" value="19" /> <label forsearch="true" for="chk19">Lable19 Text1</label></nobr>
</td>
</tr>
</table>
</div><script language="JavaScript" type="text/javascript">
//<![CDATA[
/* get referance of divContainer by id divCont */
refA = document.getElementById('divCont');
if(refA){
/* store refA's scrollTop */
scTop = refA.scrollTop;
} else {
refA = document.body;
scTop = refA.scrollTop;
}
//]]>
</script>
</form>
</body>
</html>
|
没有评论:
发表评论