如何用Javascript实现搜索功能

JavaScript014

如何用Javascript实现搜索功能,第1张

这里有一个简单的站内搜索功能

<SCRIPT language=javascript>

<!--

function go(formname)

{

var url = http://www.163ns.com

formname.method = "get"

if (formname.myselectvalue.value == "1") {

document.search_form1.word.value = document.search_form1.word.value " site:www.163ns.com"

}

formname.action = url

return true

}

//-->

</SCRIPT>

<form name="search_form1" target="_blank" onsubmit="return go(this)">

<input name=word size="30" value="请输入关键字" onMouseOver="this.focus()" onBlur="if (value ==''){value='请输入关键字'}" onFocus="this.select()" onClick="if(this.value=='请输入关键字')this.value=''">

<input type="submit" value="搜索"><br>

<INPUT name=myselectvalue type=hidden value=0>

<INPUT name=tn type=hidden value="sayyes">

<INPUT name=cl type=hidden value="3">

<INPUT CHECKED name=myselect onclick=javascript:this.form.myselectvalue.value=0 type=radio value=0>

<FONT color=#0000cc style="FONT-SIZE: 12px">互联网 

<INPUT name=myselect onclick=javascript:this.form.myselectvalue.value=1 type=radio value=1>

<FONT color=#ff0000 style="FONT-SIZE: 12px">站内 

</form>

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<script>

function select(){

var data= document.getElementById("str").value

if (data=="" || data==undefined) {

alert('请输入查询的数据')

}

switch (data) {

case 'a':

window.location.href="\a.html"

break

case 'b':

window.location.href="\b.html"

break

default:

window.location.href="\c.html"

break

}

}

</script>

</head>

<body>

<div>

<input type="text" id="str">

<button onclick="select()">搜索</button>

</div>

</body>

</html>

<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+1ii<tdnumii++){

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+1i<rownumi++){

var trobj = tab.rows[i]

//列数

var tdnum = trobj.cells.length

for(var j=0j<tdnumj++){

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=0i<rownumi++){

var trobj = tab.rows[i]

//列数

var tdnum = trobj.cells.length

for(var j=0j<tdnumj++){

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>