仿Google建议效果

最新推荐文章于 2025-08-09 20:51:19 发布

pengge8

最新推荐文章于 2025-08-09 20:51:19 发布

阅读量486

点赞数 1

CC 4.0 BY-SA版权

文章标签： google class function table javascript div

本文链接：https://blog.youkuaiyun.com/pengge8/article/details/4042180

本文介绍了一种仿照谷歌搜索框的功能实现方法，利用Ajax技术和HTML、JavaScript等前端技术，实现了输入时显示建议框的效果，并详细说明了如何通过改变元素样式来指示用户的选择。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前天看到了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 onclick="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()" onkeyup="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" onmousemove=changeIn(this.id) onmouseout=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" onmousemove=changeIn(this.id) onmouseout=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" onmousemove=changeIn(this.id) onmouseout=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" onmousemove=changeIn(this.id) onmouseout=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>