本文目錄一覽：
如何用Javascript實現搜索功能
這裡有一個簡單的站內搜索功能
SCRIPT language=javascript
!–
function go(formname)
{
var url = ;
formname.method = “get”;
if (formname.myselectvalue.value == “1”) {
document.search_form1.word.value = document.search_form1.word.value ” site:”;
}
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
JS怎麼實現站內搜索功能？
一：對文章關鍵字的搜索（數組的方法）：
!DOCTYPE html
html
head
meta charset=”utf-8″ /
title/title
style type=”text/css”
#search{
height:40px;width: 200px;font-size: 30px;text-align: center;
}
#div {
font-size: 20px;width: 600px;
}
#div span{
color: red;
}
/style
/head
body
input type=”text” name=”search” id=”search” value=”饞” onclick=”this.value=” “/
input type=”button” name=”” id=”bbtn” value=”搜索” /
div id=”div”
p饞，在英文里找不到一個十分適當的字。羅馬暴君尼祿，以至於英國的亨利八世，在大宴群臣的時候，常見其撕下一根根又粗又壯的雞腿，舉起來大嚼，旁若無人，好一副饕餮相！但那不是饞。埃及廢王法魯克，據說每天早餐一口氣吃二十個荷包蛋，也不是饞，只是放肆，只是沒有吃相。對有某一種食物有所偏好，於是大量的吃，這是貪多無厭。饞，則着重在食物的質，最需要滿足的是品味。上天生人，在他嘴裡安放一條舌，舌上還有無數的味蕾，教人焉得不饞？饞，基於生理的要求；也可以發展成為近於藝術的趣味。
也許我們中國人特別饞一些。饞字從食，有聲。毚音讒，本義是狡兔，善於奔走，人為了口腹之慾，不惜多方奔走以膏饞吻，所謂“為了一張嘴，跑斷兩條腿”。/p
/div
script type=”text/javascript”
var bbtn=document.getElementById(‘bbtn’);
var search=document.getElementById(‘search’);
var text=document.getElementsByTagName(‘p’)[0];
var text1=text.innerHTML;
var arr=[];
var str=text1;
bbtn.onclick=function(){
str=text1
arr=search.value;
str=str.split(arr).join(‘span’+arr+’/span’);
text.innerHTML=str;
}
/script
/body
/html
二：對li表單的搜索：
!DOCTYPE html
html
head
meta charset=”UTF-8″
title/title
style type=”text/css”
*{
padding: 0;margin: 0;
}
#content{
margin: 100px 300px;display: block;
}
input{
height: 50px;width: 400px;font-size: 30px;line-height: 50px;
}
ul{
}
li{
margin:10px 0px;display: block;
}
/style
/head
body
div id=”content”
ul
input type=”” name=”” id=”” value=”” placeholder=”請輸入城市的名稱或拼音”/
li pname=”北京” cname=”bj”北京/li
li pname=”株洲” cname=”zz”株洲/li
li pname=”上海” cname=”sh”上海/li
li pname=”長沙” cname=”cs”長沙/li
li pname=”杭州” cname=”hz”杭州/li
li pname=”天津” cname=”tj”天津/li
li pname=”西安” cname=”xa”西安/li
li pname=”成都” cname=”cd”成都/li
li pname=”武漢” cname=”wh”武漢/li
li pname=”南京” cname=”nj”南京/li
/ul
/div
script type=”text/javascript”
var li=document.getElementsByTagName(‘li’);
var text=document.getElementsByTagName(‘input’)[0];
function search(){
var arr=text.value;
for(var i=0;ili.length;i++)
{
li[i].style.display=”none”;
if(li[i].getAttribute(‘pname’).indexOf(arr)!=-1||li[i].getAttribute(‘cname’).indexOf(arr)!=-1)
{
li[i].style.display=”block”;
}
}
}
text.oninput=function(){
search();
}
/script
/body
/html
靜態網頁中如何用js實現搜索功能？
table id=”test”
tr
tdinput value=”testsetsetestestsetsetsetset”/input/td
tdinput value=”aaabbbaaabbbaaa”/input/td
tdinput value=”testsetsetestestsetsetsetset”/input/td
/tr
tr
tdinput value=”aaacccbbbbcccc”/input/td
tdinput value=”testsetsetestestsetsetsetset”/input/td
tdinput value=”testsetsetestestsetsetsetset”/input/td
/tr
/table
textarea name=”txtBox” rows=”7″ cols=”50″ id=”txtBox”
菊花台 (滿城盡帶黃金甲主題曲)
歌手：周杰倫 專輯：依然范特西
你的淚光 柔弱中帶傷
慘白的月彎彎 勾住過往
夜太漫長 凝結成了霜
是誰在閣樓上冰冷的絕望
雨輕輕淌 硃紅色的窗
我一生在紙上 被風吹亂
夢在遠方 化成一縷霞
隨風飄散 你的模樣
菊花慘淡地傷 你的笑容已泛黃
花落人斷腸 我心事靜靜淌
北風亂夜未央 你的影子剪不斷
徒留我孤單在湖面生霜
/textareabr
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;iitdnum;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;irownum;i++){
var trobj = tab.rows[i];
//列數
var tdnum = trobj.cells.length;
for(var j=0;jtdnum;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;irownum;i++){
var trobj = tab.rows[i];
//列數
var tdnum = trobj.cells.length;
for(var j=0;jtdnum;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
使用JS寫簡單查詢頁面？
!DOCTYPE html
html lang=”en”
head
meta charset=”UTF-8″
meta name=”viewport” content=”width=device-width, initial-scale=1.0″
titleDocument/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
靜態網頁如何用js實現查找功能？
!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “
html
head
title New Document /title
meta name=”Generator” content=”EditPlus”
meta name=”Author” content=””
meta name=”Keywords” content=””
meta name=”Description” content=””
/head
script type=”text/javascript”
!–
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’
}
var key = document.getElementById(‘key’).value;
// 如果存在改對應關係則打開，否則打開默認網址
window.open(url[key] || ‘默認網址’);
}
}
//–
/script
body
input type=”text” id=”key” /input type=”button” id=”openUrl” value=”打開網址”/
/body
/html
原創文章，作者：HZSR，如若轉載，請註明出處：https://www.506064.com/zh-hant/n/135775.html
微信掃一掃 
支付寶掃一掃 