仿google搜索提示(没连数据库)

最新推荐文章于 2021-07-01 18:26:04 发布

ASdeAK1983

最新推荐文章于 2021-07-01 18:26:04 发布

阅读量1.1k

点赞数

分类专栏： ajax 文章标签： google 数据库 table function javascript border

本文链接：https://blog.csdn.net/ASdeAK/article/details/1957073

版权

ajax 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

看到网上很多仿google的例子,自已也做了一个来玩,大家可以看看,这是没连数据库的,只是在javascript的array对象中自定义了一些字符.

在提示框中输入"a"就有下拉提示的拉

search.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>

-->
</style>
<script language="javascript">
var arrA =new Array();
function creatediv()
{

var lay1=document.getElementById("Layer1");
var texts=document.getElementById("searchtext");

var table=document.getElementById("listtable");
//清除生成的数据
clearrow(table);
var table_body =table.getElementsByTagName("tbody").item(0);

for(var i=0;i<arrA.length;i++){
//不为空的时候搜索
if(arrA[i].name.indexOf(texts.value) >= 0){
       //添加数据行
    var new_row=createRow(arrA[i].name);
     table_body.appendChild(new_row);
   }
}
lay1.style.display='block';

}
//初始化数据组Array
function initArray()
{
arrA.push({name:"asssss",value:"asssss"});
arrA.push({name:"ab",value:"ab"});
arrA.push({name:"abbbbb",value:"abbbbb"});
arrA.push({name:"asd",value:"asssss"});
arrA.push({name:"aad",value:"ab"});
arrA.push({name:"a111",value:"abbbbb"});
arrA.push({name:"a222",value:"asssss"});
arrA.push({name:"a3121",value:"ab"});
arrA.push({name:"a23ada",value:"abbbbb"});
arrA.push({name:"星哥",value:"星哥"});
arrA.push({name:"星星星",value:"星星星"});
}

//生成行
function createRow(message)
{

var row = document.createElement("tr");
var cell = document.createElement("td");
//生成div,包含有selectvalue的方法
var div =document.createElement("<div οnclick='selectvalue(this);' οnmοuseοver='selectFX(this)'/>");
div.innerHTML=message;

cell.appendChild(div);
row.appendChild(cell);

return row;

}
//清楚旧数据
function clearrow(table)
{

var table_tbody=table.childNodes.item(0);
var rowlength=table_tbody.childNodes.length;

for(var i=0;i<rowlength;i++){
var table_tr=table_tbody.childNodes.item(0);
table_tbody.removeChild(table_tr);
}
}
//提示框选择数据
function selectvalue(obj)
{

var text=document.getElementById("searchtext");
text.value=obj.innerHTML;
var lay1=document.getElementById("Layer1");
lay1.style.display='none';
}
//--选择效果
var lastOver_findInSelect = null
function selectFX( which ){
obj = lastOver_findInSelect
if( obj != null && which != obj ){
obj.style.cssText="color:windowtext;background:white;"
}
which.style.cssText="color:highlighttext;background:highlight;"
lastOver_findInSelect = which
}