目前,这是一个理论性的问题,但是我可能需要长期做一些事情。
当您访问google.com并开始输入搜索内容时,它将在一个小的下拉菜单中为您提供建议。我可以肯定地说,他们使用AJAX来发送您输入的内容并获得可能的建议列表。我要弄清楚的是他们实际如何显示该列表。它看起来像一个简单的下拉列表,只是顶部没有实际的选择框。在我的心中,毫无疑问,这就像一个CSS技巧一样简单,它可以将选择框从它产生的下拉列表或除select之外的其他输入类型中分开,但是我在画一个空白。
好的,因此您有多种可能性,您可以使用选择下拉列表并将其准确地绘制在输入的键入文本的下面,这是键入关键字的提示。在CSS中,偏离路线的绝对位置必须使用低于文本输入的z- index。
另一个更复杂的示例是您绘制一个无序列表,其样式类似于下拉列表。如果使用此选项,则还可以例如加载带有普通文本建议的图像(图标)。对于此示例,您需要将ul放置在文本输入下方,为当前选择的il创建css悬停效果,并在每个il上创建click事件,这将用clicked关键字填充文本输入并隐藏无序列表。
我希望这能解释您的问题。