本文目錄一覽：
靜態網頁中如何用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代碼，莫亂複製過來。
額..站內搜索是要鏈接資料庫的,,JS一般不太用..頁面搜索JS用的倒是比較多
js搜索框代碼
/* 問題不夠明確 */
input class=”ipt_search” type=”search” placeholder=”請輸入搜索內容”/
script
/* 搜索input */
var searchIpt = document.getElementsByClassName(‘ipt_search’)[0];
/* 搜索內容 */
var searchValue = searchIpt.value;
/script
js如何實現劃詞搜索分享代碼
javascript實現劃詞標記+劃詞搜索功能代碼實例
!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
html
head
titleUntitled Document/title
meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″
/head
body
SCRIPT language=javascript
!–
document.body.onload=adddiv;
document.onmousedown=recordobj;
document.ondblclick=dbclick;
document.onmouseup=showselect;
var starobj,isdb=false,allow=true;
function isallow()
{
if(allow){
allow=false;
alert(‘is closed’);
}
else{
allow=true;
alert(‘is opend’);
}
}
function dbclick()
{
isdb=true;
}
function recordobj()
{
starobj=event.srcElement;
}
function showselect() {
var str=””;
if(event.srcElement.tagName!=”A”event.srcElement.tagName!=”INPUT”event.srcElement==starobj!isdballow)
{
var oText=document.selection.createRange();
if(oText.text.length0)
{
str=oText.text;
oText.text=”BuB”+oText.text+”EuE”;
}
oText.select();
event.srcElement.innerHTML=event.srcElement.innerHTML.replace(“BuB”,”u style=’FONT-WEIGHT: bold;COLOR: #ff3366′”).replace(“EuE”,”/u”);
}
searchgoogle(str)
isdb=false;
}
function searchgoogle(str)
{
var obj=document.getElementById(“searchgoogle”);
if(str.length0)
{
obj.style.display=”block”;
obj.style.position=”absolute”;
obj.style.zindex=999;
obj.style.posTop=document.body.scrollTop+event.y-25;
obj.style.posLeft=document.body.scrollLeft+event.x+5;
obj.style.widht=80;
obj.innerHTML=”a target=_blank href=;oe=UTF-8q=”+str+” style=’BORDER-RIGHT: royalblue thin solid; BORDER-TOP: royalblue thin solid; FONT-WEIGHT: bold; BORDER-LEFT: royalblue thin solid; CLIP: rect(auto auto auto auto); COLOR: #ffffff; BORDER-BOTTOM: royalblue thin solid; BACKGROUND-COLOR: inactivecaption; TEXT-DECORATION: none’Search It！/a”;
}
else
{
obj.style.display=”none”;
}
}
function adddiv()
{
var mobj = document.createElement(“div”);
mobj.id=”searchgoogle”;
document.body.appendChild(mobj);
}
//–
/SCRIPT
INPUT type=”button” onclick=”isallow()” value=”關閉/打開劃詞功能”
pqrasfdasfasfdasfsafasdfsafsafasdfasdfasd/p
/body
/html
搜索引擎代碼
百度代碼
谷歌代碼:script type=”text/javascript”!–
google_ad_client = “pub-1823078279817872”;
google_ad_format = “configurable_sdo”;
google_link_target = 2;
google_color_bg = “ffffff”;
google_color_link = “000000”;
google_color_text = “000000”;
google_encoding = “GB2312”;
google_ad_channel = “0788295894”;
google_box_len = 31;
google_logo_pos = “left”;
google_ad_height = 30;
google_ad_width = 500;
//–
/script
script type=”text/javascript”
src=””
/script
搜搜代碼
騰訊搜搜SOSO站內免費搜索代碼:
——————————————————————————–
將以下HTML代碼放入您的網頁中即可進行站內檢索(需將換成您網站的域名)
!–Begin of Search QQ –form method=”get” action=”” target=_blanka href=”” target=”_blank”img src=”” border=”0″ align=”absbottom”/ainput type=”text” name=”w” size=”30″ maxlength=”50″input type=”hidden” name=”sc” value=”site”input type=”submit” value=”在 站內搜索”input type=”hidden” name=”site” value=””input type=”hidden” name=”ch” value=”website”/form!–End of Search QQ —
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/254358.html
微信掃一掃 
支付寶掃一掃 