gpt4 book ai didi

twitter-bootstrap - 向 Twitter bootstrap typeahead 组件添加下拉按钮

转载 作者:行者123 更新时间:2023-12-03 21:48:17 24 4
gpt4 key购买 nike

Twitter bootstrap 带有一个非常方便的类似自动完成的组件,称为 typeahead。我正在尝试添加一个小的下拉按钮(或小部件),这样当按下 typeahead 组件时,它就像一个普通的下拉选择器,显示所有可用的数据源绑定(bind)选项(除了它的 native 自动完成功能)。当前标记类似于以下内容:

<input type="text" 
data-provide="typeahead"
data-items=5
data-source='["option 1","option 2","option 3"]'>

因此,实际上需要让组件充当下拉和自动完成小部件的混合体。
以前有人做过吗?谢谢...

最佳答案

我发现了这个出色的组件:

Source code
Live example

不过有一件事,下拉按钮的背景在翻转时看起来很有趣。该修复涉及“bootstrap-combobox.css”中的一个小改动:

...
.combobox-container .add-on {
float: left;
display: block;
width: auto;
min-width: 16px;
height: 18px;
margin-right: -1px;
padding: 4px 5px;
font-weight: normal;
line-height: 18px;
color: #999999;
text-align: center;
text-shadow: 0 1px 0 #ffffff;
/* background-color: #f5f5f5; */ // <<------------ comment this line
border: 1px solid #ccc;
-webkit-border-radius: 3px 0 0 3px;
-moz-border-radius: 3px 0 0 3px;
border-radius: 3px 0 0 3px;
}
...

关于twitter-bootstrap - 向 Twitter bootstrap typeahead 组件添加下拉按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10689830/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com