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

 我来答

2个回答

#热议# 网上掀起『练心眼子』风潮，真的能提高情商吗？

aliang888
推荐于2018-04-05 · TA获得超过745个赞

知道小有建树答主

回答量：628

采纳率：62%

帮助的人：207万

我也去答题访问个人页

关注

展开全部

<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>

已赞过 已踩过<

评论收起

axqsp79
2010-12-25 · TA获得超过1484个赞

知道答主

回答量：281

采纳率：100%

帮助的人：244万

我也去答题访问个人页

关注

展开全部

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

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


本回答被提问者采纳






已赞过已踩过<

你对这个回答的评价是？
评论收起

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

您可能关注的内容

静态页面生成双十一知识盛典，直降60%+红包雨，错过等一年!

静态页面生成编程盛宴，特惠不停歇，下单即抽好礼，体系课+实战课组合下单，最高立省2800元静态页面生成活动期间累计实付满1000元，额外赠送300元以下课程兑换券，学习不停歇!

www.imooc.com广告

华为云网站建设-一站式服务-打造高端网站

网站建设，华为云模板建站，3000+模板，60+行业覆盖，PC+移动自适应建站，仅需368元/年华为云建站，全程1v1管家式服务，不满意全额退，多端合一，全场景覆盖

www.huaweicloud.com广告

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

您可能关注的内容

其他类似问题

为你推荐：