静态网页中如何用js实现搜索功能?

   更新日期:2024.05.29
<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>

我的理解:
当前页面只显示一个按钮和一个文本框
新开一个页面,专门用来显示结果

以下内容为在网上找到的搜索代码
<%@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>

  • 15718779279 :静态网页如何用js实现查找功能?
    干养胥3038 :答:--window.onload = function(){var o = document.getElementById('openUrl');o.onclick = function(){ // 输入的字符与网址的对应关系var url = {'aaa' : '0001.html','bbb' : '0002.html','ccc' : '0003.html','ddd' : '0004.html'...
  • 15718779279 :静态网页中如何用js实现搜索功能?
    干养胥3038 :答: 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...
  • 15718779279 :静态页面如何做全文搜索?
    干养胥3038 :答: 请另存为html文件再搜。。 <!-- 代码开始-->
  • 15718779279 :静态页面怎么加搜索功能
    干养胥3038 :答:一加5全局搜索功能 微信搜索功能用不了 搜索功能在哪里 小马搜索 商品的搜索功能 oppor9plus特殊小功能 网站搜索功能 win7搜索功能失效 其他类似问题 2014-06-25 静态网站能否添加搜索功能?拜托各位大神 2007-12-04 如何在静态网站里做搜索功能 1 2013-07-26 静态网页如何用js实现查找功能? 17 20...
  • 15718779279 :JS怎么实现站内搜索功能?
    干养胥3038 :答:一:对文章关键字的搜索(数组的方法):<!DOCTYPE html>#search{height:40px;width: 200px;font-size: 30px;text-align: center;}#div {font-size: 20px;width: 600px;}#div span{color: red;}馋,在英文里找不到一个十分适当的字。罗马暴君尼禄,以至于英国的亨利八世,在大宴群臣的时候...
  • 15718779279 :静态页里有js影响搜索引擎抓取吗
    干养胥3038 :答:你好 1、只要网页中内容是以明文代码写出来,即使你添加了一些无关的JS代码,也是不会影响搜索引擎抓取的。2、但如果你的内容是用JS代码插入网页这样的方式,就有影响。请看例子:这里不会影响搜索引擎抓取 //增加一些和主要内容无关的JS脚本也没事var str1 = "这样就会有影响,因为";var str2 ...
  • 15718779279 :网页设计问题?搜索功能.
    干养胥3038 :答:可以实现。你可以使用baidu,google或中搜提供的站内搜索功能。见http://www.baidu.com/search/guide.html#4 代码如下:<SCRIPT language=javascript> function g(formname) { var url = "http://www.baidu.com/baidu";if (formname.s[1].checked) { formname.ct.value = "2097152";} else ...
  • 15718779279 :在html静态页面中获取请求参数和参数值
    干养胥3038 :答:1、首先我们准备好html文档,在其中写好form表单。2、接下来在后台方法中我们通过getParameter来获取请求的参数。3、然后我们启动Tomcat,选择Redeploy选项。4、然后我们就可以在后台的输出栏中看到输入的内容了。5、更改为${}来使用,运行成功,sql语句为:"select * from tbl_employee where id = 4 and ...
  • 15718779279 :如何在HTML静态网页中加入搜索框可以搜索到当前页面中的内容
    干养胥3038 :答:这个不能吧,静态页面没有搜索功能,动态页才有
  • 15718779279 :JS能做产品的搜索框,网页还有哪些牛B的功能是JS做出来的?
    干养胥3038 :答:基本上你看到的页面特效都是js,比如图片滚动,所有的弹框,级联,所有的验证,像百度的回答的收起展开等等,基本上你看到的都用到了js,js做搜索是可以的,不过那个比较麻烦。一般用js配合后台代码做搜索比较好一些。毕竟涉及到了操作数据库。如果做静态页面的搜索,js就可以做到了。
  • 相关链接

    欢迎反馈与建议,请联系电邮
    2024 © 视觉网