如何创建像Google一样的建议下拉列表？ [英] How do I create a suggestion drop-down list like Google's?

问题描述

这是目前的理论问题，但我可能需要长期进行。

It's a theoretical question at this point in time, but something I'm probably going to want to do long-term.

当您访问google.com时并开始输入搜索内容，它将在一个小的下拉菜单中为您提供建议。我可以肯定地说，他们使用AJAX来发送您输入的内容并获取可能的建议列表。我要弄清楚的是他们实际如何显示该列表。看起来像一个简单的< select>下拉列表，只是顶部没有实际的选择框。我的想法是毫无疑问的，这就像一个CSS技巧一样简单，它可以将选择框从它产生的下拉列表或除select之外的其他输入类型中进行划分，但是我在画一个空白。

When you go to google.com and start typing a search, it'll provide you with suggestions in a little drop down menu. I'm reasonably certain that they use AJAX to send what you've typed and get a list of possible suggestions back. What I'm trying to figure out is how they actually display that list. It looks like a simple <select> drop down list, just without the actual select box at the top. There is zero doubt in my mind that it's something as stupidly simple as a CSS trick that divides the select box from drop-down list it produces or an input type other than select, but I'm drawing a blank.

推荐答案

好的，所以您有多种可能性，可以使用选择下拉列表并将其精确地绘制在输入的键入文本下方，这是键入的内容关键字。在CSS中，偏离路线的绝对位置必须使用低于文本输入的z-index。

okay, so you got multiple posibilities, you can use a select dropdown and draw it exactly underneath the input typed text, which is ment for typing in the keyword. Off course in CSS it needs to be absolute positioned with a lower z-index than the input for text.

另一个更复杂的示例是您绘制无序样式类似于下拉列表的列表。如果使用此选项，则还可以例如加载带有普通文本建议的图像（图标）。对于此示例，您需要将ul放置在文本输入下方，为当前选择的il创建css悬停效果，并在每个il上创建click事件，这将用clicked关键字填充文本输入并隐藏无序列表。

the other, more complex example is that you a draw a unordered list which is styled like a dropdown. If you use this one, you can for example also load images (icons) with the ordinary text suggestion. For this example you need to position the ul beneath the input for text, create css hover effects for currently selected il and create click event on each il, which fills up the text input with clicked keyword and hides the unordered list.

我希望这能解释您的问题。

I hope that explains your question.

这篇关于如何创建像Google一样的建议下拉列表？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！