仿Google建议效果

最新推荐文章于 2024-07-23 18:15:45 发布

pengge8

最新推荐文章于 2024-07-23 18:15:45 发布

阅读量445

点赞数 1

文章标签： google class function table javascript div

本文链接：https://blog.csdn.net/pengge8/article/details/4042180

版权

前天看到了Ajax的书籍，突然发现可以解决后台操作的问题。就想到了google

那么，经过一天的功夫，基本上已经做出其效果。

要突破这几个问题：

1、在弹出的建议框它是什么？

这个问题我起初尝试了很多办法，它是下拉列表好像不是没有下箭头（否定），之后，看了用层还不错！

那也就是说建议框是一个层，我想的是里面是一个表格。

设计的这个框的最终代码是：

2、怎么就知道它是选择的呢？

这个我想了很长时间~ 最后使用附加信息的方法来确认具体项是哪一项选中

例如：

在table 里的这段代码：

之后可以在JavaScript使用:

document.getElementById(who).classname; 来获取是否选中

最后看看我这一天做的一个很粗糙的HTML

<html> <head> <meta http-equiv="Content-Language" content="zh-cn"> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>My Google by pengge</title> <mce:script language="javascript"></mce:script> </head> <body οnclick="change2()"> <p><b>　 My Google by pengge </b> <div><input style="textfield" mce_style="textfield" id="targetText" title="My Google Search by pengge" onpropertychange="change()" οnkeyup="checkKeyUp()" style=" width: 302px" mce_style=" width: 302px" ><input type="button" value="My Google" name="B3"> </div> <div id="div1" style=" width: 302px; height: 91px; z-index: 1;display:none;;border-style:solid; border-width:1px" > <table border="0" width="100%" id="table1" cellspacing="0" cellpadding="0"> <tr id="t1" class="I was no selected" οnmοusemοve=changeIn(this.id) οnmοuseοut=changeOut(this.id)> <td width="155">我的太阳</td> <td style="color:green" mce_style="color:green" >查询结果:2222</td> </tr> <tr id="t2" class="I was no selected" οnmοusemοve=changeIn(this.id) οnmοuseοut=changeOut(this.id) > <td width="155">我的故乡</td> <td style="color:green" mce_style="color:green" >查询结果:1212122</td> </tr> <tr id="t3" class="I was no selected" οnmοusemοve=changeIn(this.id) οnmοuseοut=changeOut(this.id)> <td width="155">我的太阳</td> <td style="color:green" mce_style="color:green" >查询结果:2222</td> </tr> <tr id="t4" class="I was no selected" οnmοusemοve=changeIn(this.id) οnmοuseοut=changeOut(this.id)> <td width="155">我的故乡</td> <td style="color:green" mce_style="color:green" >查询结果:1212122</td> </tr> <tr> <td></td> <td><span style="color:blue" mce_style="color:blue">关闭</span></td> </tr> </table> </div> </p> </body> </html>

pengge8

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
仿Google建议效果

前天看到了Ajax的书籍，突然发现可以解决后台操作的问题。就想到了google那么，经过一天的功夫，基本上已经做出其效果。要突破这几个问题：1、在弹出的建议框它是什么？这个问题我起初尝试了很多办法，它是下拉列表好像不是没有下箭头（否定），之后，看了用层还不错！那也就是说建议框是一个层，我想的是里面是一个表格。
复制链接

扫一扫