输入框选项下拉

Question

我正在寻找创建这样的东西：

http://konigi.com/interface/kontain-search

替代文字http://s3.amazonaws.com/konigi/interface/kontain-search-2.png

我不认为任何人都有任何资源可以指导我？ 我知道我不会放弃太多的信息，但我不知道从哪里开始寻找。

干杯!

编辑对不起，我的意思只是下拉/输入框，其他什么都在该网站上。

编辑再次下拉列表是输入框，因此为什么我想知道的内部 。

Answer 1

可能类似于这些示例，但只有一个主要项目。 并使用jquery操纵每个“ li”，并采取相应的措施

示例1 | 示例2 | 示例3 | 例子4

版本答案：这是用CSS完成的。 全部包含在div->输入+菜单中。 对于输入，将删除边框样式，并且背景颜色与容器div相同。

Answer 2

好了，您将搜索表单的一部分放在一个隐藏的div中，并在用户单击或悬停在表单内部或外部的其他元素时将其弹出。 根据需要使用CSS定位div。 不太确定这样的问题可能会带来什么问题。

也许您可以更具体一些，并将这个问题分解为几个更集中的问题？

Answer 3

我没有深入研究该站点，但是从逻辑的角度来看，搜索框和下拉列表可能位于另一个元素（div？）的“内部”，该元素形成了复杂的控件……而仅仅是formatted（CSS）/ actions（jQuery）放在那些。

<div id="searchDiv">
    <div id="searchText"></div>
    <div id="searchDropdown"></div>
    <div id="searchButton"><div>
</div>

设置这样的东西很容易。

Answer 4

我认为这并不是在下拉列表位于输入框内，而是隐藏了输入框chrome，并将其与下拉列表一起置于输入外观div中。