静态网页中如何用js实现搜索功能？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了静态网页中如何用js实现搜索功能？相关的知识，希望对你有一定的参考价值。
<table id="test"><tr>
<td><input value="testsetsetestestsetsetsetset"></input></td>
<td><input value="aaabbbaaabbbaaa"></input></td>
<td><input value="testsetsetestestsetsetsetset"></input></td>
</tr>
<tr>
<td><input value="aaacccbbbbcccc"></input></td>
<td><input value="testsetsetestestsetsetsetset"></input></td>
<td><input value="testsetsetestestsetsetsetset"></input></td>
</tr>
</table>
<textarea name="txtBox" rows="7" cols="50" id="txtBox">
菊花台 (满城尽带黄金甲主题曲)
歌手：周杰伦 专辑：依然范特西
你的泪光 柔弱中带伤
惨白的月弯弯 勾住过往
夜太漫长 凝结成了霜
是谁在阁楼上冰冷的绝望
雨轻轻淌 朱红色的窗
我一生在纸上 被风吹乱
梦在远方 化成一缕霞
随风飘散 你的模样
菊花惨淡地伤 你的笑容已泛黄
花落人断肠 我心事静静淌
北风乱夜未央 你的影子剪不断
徒留我孤单在湖面生霜
</textarea><br>
<input type="text" value="输入要查询的内容" id="txtFind">
<input type="button" value="表查找" onclick="searchclick()">
<input type="button" value="简单查找" onclick="findText(txtFind.value)">
<script language="javascript">
var searchobj = new Object;
var rng = new Object;
searchobj.row = -1;
searchobj.col = -1;
function searchclick()
findText2("test",txtFind.value);
function findText2(tabname,str)
var tab = document.getElementById(tabname);
var rowobj = tab.rows;
//行数
var rownum = rowobj.length;
if(searchobj.row != -1 && searchobj.col != -1 )
var trobj = tab.rows[searchobj.row];
//列数
var tdnum = trobj.cells.length;
//定义一个变量，作为moveStart()函数的偏移量，即开始点跳过选择文本
var num = 0;
if(document.selection)
num = document.selection.createRange().text.length;
//每次调用函数，结束点都为末尾，而开始点是跳过选择文本后的新开始点
rng.moveStart("character",num);
rng.moveEnd("character",rowobj[searchobj.row].cells[searchobj.col].childNodes[0].value.length);
//搜索到后选择文本
if(rng.findText(str))
rng.select();
if(rng.text==str)
return;
//如果上次查询结果是最后一列
if(searchobj.col < tdnum-1)
for(var ii=searchobj.col+1;ii<tdnum;ii++)
rng = rowobj[searchobj.row].cells[ii].childNodes[0].createTextRange();
//搜索到后选择文本
if(rng.findText(str))
rng.select();
if(rng.text==str)
searchobj.col = ii;
return;
//如果上次查询结果不是最后一行
if(searchobj.row != rownum-1)
for(var i=searchobj.row+1;i<rownum;i++)
var trobj = tab.rows[i];
//列数
var tdnum = trobj.cells.length;
for(var j=0;j<tdnum;j++)
if(rowobj[i].cells[j].childNodes[0].tagName == "INPUT")
rng = rowobj[i].cells[j].childNodes[0].createTextRange();
//搜索到后选择文本
if(rng.findText(str))
rng.select();
if(rng.text==str)
searchobj.row = i;
searchobj.col = j;
return;
if(i==rownum-1 && j==tdnum-1)
searchobj.row = -1;
searchobj.col = -1;
findText2(tabname,str);
else
searchobj.row = -1;
searchobj.col = -1;
findText2(tabname,str);
else
for(var i=0;i<rownum;i++)
var trobj = tab.rows[i];
//列数
var tdnum = trobj.cells.length;
for(var j=0;j<tdnum;j++)
if(rowobj[i].cells[j].childNodes[0].tagName == "INPUT")
rng = rowobj[i].cells[j].childNodes[0].createTextRange();
//搜索到后选择文本
if(rng.findText(str))
rng.select();
if(rng.text==str)
searchobj.row = i;
searchobj.col = j;
return;
if(i==rownum-1 && j==tdnum-1)
alert("没有您要查找的内容");
var rng = document.body.createTextRange();
function findText(str)
debugger;
if(str=="")
return;
//定义一个变量，作为moveStart()函数的偏移量，即开始点跳过选择文本
var num = 0;
if(document.selection)
num = document.selection.createRange().text.length;
//每次调用函数，结束点都为末尾，而开始点是跳过选择文本后的新开始点
rng.moveStart("character",num);
rng.moveEnd("character",txtBox.value.length);
//搜索到后选择文本
if(rng.findText(str))
rng.select();
//搜索到最后的范围还是找不到，则提示搜索完毕，并重新恢复rng最初的范围(否则无法执行新搜索)
if(rng.text!=str)
alert("搜索完毕");
rng = txtBox.createTextRange();
rng = txtBox.createTextRange();
</script> 参考技术A 我的理解:
当前页面只显示一个按钮和一个文本框
新开一个页面,专门用来显示结果
以下内容为在网上找到的搜索代码
<%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%>
<!--＃i nclude file="manage/inc/config.asp"-->
<!--＃i nclude file="inc/conn.asp"-->
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>爱T发明书店</title>
<link href="/blog/style.css" rel="stylesheet" type="text/css">
</style>
<!-- European format dd-mm-yyyy -->
<script language="JavaScript" src="/blog/calendar.js"></script>
</head>
<body>
<!--＃i nclude file="head.htm"-->
<table width="780" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="219" align="left" valign="top"><!--＃i nclude file="left.asp"--></td>
<td width="561" align="left" valign="top">
<br> <script language=javascript>
var whitespace = " \t\n\r";
function IsWhitespace (s)
var i;
if (IsEmpty(s)) return true;
for (i = 0; i < s.length; i++)
var c = s.charAt(i);
if (whitespace.indexOf(c) == -1) return false;
return true;
function IsEmpty(s)
return ((s == null) || (s.length == 0))
function IsDate(fDate)
var arrDaysInMonth=new Array(12);
arrDaysInMonth[1]=31;
arrDaysInMonth[2]=29;
arrDaysInMonth[3]=31;
arrDaysInMonth[4]=30;
arrDaysInMonth[5]=31;
arrDaysInMonth[6]=30;
arrDaysInMonth[7]=31;
arrDaysInMonth[8]=31;
arrDaysInMonth[9]=30;
arrDaysInMonth[10]=31;
arrDaysInMonth[11]=30;
arrDaysInMonth[12]=31;
if (IsEmpty(fDate))
return true
var NameList=fDate.split("-");
if (NameList.length!=3)
return false
if (!(IsYear(NameList[0]) && IsMonth(NameList[1]) && IsDay(NameList[2])) )
return false
if ( NameList[1]>arrDaysInMonth[NameList[1]] )
return false
if ( (NameList[1]==2) && (NameList[2]>DaysInFebruary(NameList[0]) ) )
return false
return true
function search()
var name = document.forms['frmdata'].elements['name'].value;
var author = document.forms['frmdata'].elements['author'].value;
var manufacturer = document.forms['frmdata'].elements['manufacturer'].value;
var smallprice = document.forms['frmdata'].elements['smallprice'].value;
var largeprice = document.forms['frmdata'].elements['largeprice'].value;
var enabledate = document.forms['frmdata'].elements['enabledate'].value;
var expiredate = document.forms['frmdata'].elements['expiredate'].value;
if (!IsWhitespace(enabledate))
if (!IsDate(enabledate))
alert("出版日期 开始日期格式错误!");
return false;
if (!IsWhitespace(expiredate))
if (!IsDate(expiredate))
alert("出版日期 结束日期格式错误!");
return false;
var allNotEmpty = (!IsWhitespace(name)) ||
(!IsWhitespace(author)) ||
(!IsWhitespace(manufacturer)) ||
(!IsWhitespace(smallprice)) ||
(!IsWhitespace(largeprice))||
(!IsWhitespace(enabledate)) ||
(!IsWhitespace(expiredate));
if (!allNotEmpty)
alert("必需输入一个搜索条件");
return false;
if (!IsWhitespace(smallprice))
if (!IsPlusNumeric(smallprice))
alert("价格数据不合法");
return false;
if (!IsWhitespace(largeprice))
if (!IsPlusNumeric(largeprice))
alert("价格数据不合法");
return false;
if ((!IsWhitespace(enabledate)) && (!IsWhitespace(expiredate)))
if (enabledate>expiredate)
alert("出版日期范围错误");
return false;
if ((!IsWhitespace(smallprice)) && (!IsWhitespace(largeprice)))
if (parseFloat(smallprice)>parseFloat(largeprice))
alert("价格范围错误");
return false;
</script> <br> <table cellpadding="0" cellspacing="0" border="0">
<tr>
<td><img src="/blog/images/w.gif"></td>
<td style="color:#415373">搜索图书</td>
</tr>
</table> <br> <FORM name=frmdata method=get action="rsearch.asp">
<TABLE cellSpacing=10 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD align=right width="31%" height=30>商品名称：</TD>
<TD width="69%"><INPUT name=name class="inputstyle">
</TD>
</TR>
<TR>
<TD align=right width="31%" height=30>作者名称：</TD>
<TD width="69%"><INPUT name=author class="inputstyle">
</TD>
</TR>
<TR>
<TD align=right width="31%" height=30>出版社：</TD>
<TD width="69%"><INPUT name=manufacturer class="inputstyle">
</TD>
</TR>
<TR>
<TD align=right width="31%" height=28>出版时间：</TD>
<TD vAlign=center width="69%"><INPUT name=enabledate class="inputstyle" size=12>
<a
href="javascript:cal1.popup();"><img height=16 alt=点击选择日期
src="/blog/images/cal.gif" width=16 border=0></a> 至
<INPUT name=expiredate class="inputstyle" size=12>
<a
href="javascript:cal2.popup();"><img height=16 alt=点击选择日期
src="/blog/images/cal.gif" width=16 border=0></a> <script language=JavaScript>
var cal1 = new calendar1(document.forms['frmdata'].elements['enabledate']);
cal1.year_scroll = true;
cal1.time_comp = false;
var cal2 = new calendar1(document.forms['frmdata'].elements['expiredate']);
cal2.year_scroll = true;
cal2.time_comp = false;
</script></TD>
</TR>
<TR>
<TD align=right width="31%" height=30>价格范围：</TD>
<TD width="69%"> <input name="smallprice" type="text" id="smallprice" size="5" >
至
<input name="largeprice" type="text" id="largeprice"
size="5" >
</TD>
</TR>
<TR>
<TD align=right height=30>分类：</TD>
<TD><select name=code>
<option value="" selected>所有图书</option>
<%
set rs=server.CreateObject("adodb.recordset")
rs.open "select * from category",conn,1,1
do while not rs.eof
%>
<option value="<%=rs("categoryid")%>" ><%=rs("category")%></option>
<%
rs.movenext
loop
rs.close
set rs=nothing
%>
</select></TD>
</TR>
<TR>
<TD align=right height=30>排序字段：</TD>
<TD><input name="OrderField" type="radio" value="adddate" checked>
添加日期 <input type="radio" name="OrderField" value="productdate">
出版日期
<input type="radio" name="OrderField" value="price2">
价钱(会员价)
<br>
<br> <input type="radio" name="OrderField" value="vipprice">
价钱(VIP)
<input type="radio" name="OrderField" value="pagenum">
页数 <input type="radio" name="OrderField" value="discount">
折扣</TD>
</TR>
<TR>
<TD align=right width="31%" height=30>排序方式：</TD>
<TD width="69%"><input type="radio" name="Order" value="ASC">
升序
<input name="Order" type="radio" value="DESC" checked>
降序</TD>
</TR>
<TR align=center>
<TD height=40 colSpan=2><INPUT type=submit value=开始搜索 name=Submit2 onClick="return search()"> </TD>
</TR>
</TABLE>
</FORM></td>
</tr>
</table>
<!--＃i nclude file="foot.htm"-->
</body>
</html>本回答被提问者采纳
以上是关于静态网页中如何用js实现搜索功能？的主要内容，如果未能解决你的问题，请参考以下文章