如何创建一个类似Google的建议下拉列表？

这是一个在这个时候的理论问题，但我可能会想长期做的事情。如何创建一个类似Google的建议下拉列表？

当您访问google.com并开始输入搜索内容时，它会在一个下拉菜单中为您提供建议。我相当确定他们使用AJAX发送您输入的内容，并获得可能的建议列表。我试图弄清楚的是他们如何实际显示该列表。它看起来像一个简单的<选择>下拉列表，只是没有在顶部的实际选择框。在我的脑海里，我怀疑它是一种愚蠢简单的东西，它像CSS技巧一样将选择框从它产生的下拉列表或除了select以外的输入类型中划分出来，但我画的是空白。

来源

2011-05-29 RonLugge

没问题，所以你有多种可能性，你可以使用一个选择下拉列表，并在输入文本下方绘制它，这是键入关键字的必要条件。当然，在CSS中，它需要绝对定位，其Z-index要比文本的输入更低。

另一个，更复杂的例子是你画一个无序的列表，其样式如下拉式。如果你使用这个，你也可以用普通的文本建议加载图像（图标）。对于这个例子，您需要将ul放置在文本输入的下方，为当前选定的il创建css悬停效果，并在每个il上创建点击事件，从而用单击的关键字填充文本输入并隐藏无序列表。

我希望能解释你的问题。

来源

2011-05-31 04:56:29

非常感谢，这个答案非常直接地回答了我的问题的主旨。你的其他答案也不错，只是回答错误的问题。非常彻底，非常完整，虽然我之前没有做过任何类似的事情，但我认为我可以仅仅从您的解释中做到这一点，而不实际查找除引用之外的任何内容。 – RonLugge 2011-06-02 05:04:18

非常欢迎。我很高兴我能帮上忙。 – 2011-06-02 10:22:57

回答这个问题可能会有所帮助：

Text box with drop down suggestions

来源

2011-05-29 18:44:47

'自动完成'...正是我要找的。我知道我只是没有寻找正确的关键字！ – RonLugge 2011-05-29 18:59:07

我刚刚搜索了“建议下拉列表”，该问题是第一页参考 – 2011-05-29 19:02:29

这很奇怪，因为我认为它在我的搜索过程中根本没有出现。订单对谷歌很重要吗？ – RonLugge 2011-06-02 05:02:31

您可以使用jQuery自动完成 -

的想法是，你开除一个JavaScript事件的onkeyup。这个事件应该发布一个包含你正在写入的输入的当前值的ajax请求。

从那里PHP检查数据库中的关键字，如果它是返回结果返回到JavaScript。

JS检查ajax请求的结果并将从ajax返回的任何内容填充到绝对定位的选择中。

绝对定位选择有一个onClick事件，它将select中的单击值填充到正在写入的文本输入中。

请原谅我的英语，但我努力解释。

来源

2011-05-29 19:06:59

我想我的问题并不像我希望的那样清楚。问题是没有从服务器获取数据;我的问题集中在如何将数据以下拉框的形式显示给用户。 – RonLugge 2011-05-31 04:16:28

如何创建一个类似Google的建议下拉列表？

回答

相关问题