twitter bootstrap自动完成下拉列表/带有Knockoutjs的组合框


114

我有一个必须使用引导程序自动完成下拉菜单的要求,但是用户可以根据需要在该下拉菜单中使用自由格式的文本。在考虑TypeAhead之前,我可以使用Bootstrap TypeAhead文本框,但是我需要具有下拉菜单,因为我们希望提供一些默认值作为headstart选项,以防用户不知道要搜索什么。

我在MVC DropDownListFor中使用它,因为它为我们创建了一个选择控件。

我发现这篇文章为我做到了。

https://github.com/danielfarrell/bootstrap-combobox/pull/20

我要做的就是从选择控件中删除名称,而该控件让我输入自由格式的文本。到目前为止一切都很好。

现在,我将其与Knockoutjs结合使用。我将选项和选择的值绑定到选择控件,然后在呈现模板的行上调用(selector).combobox(),这使选择控件成为自举式组合框,并添加了输入控件并将选择控件隐藏在场景中背后。

现在的问题是,当我尝试获取要发送到服务器的值时,由于我在输入框中输入的值不是我为选择控件提供的选项中的有效选项,因此默认情况下始终将其设置为第一个选项。这是因为,我将所选值的绑定设置在选择控件上,而不是在bootstrap-combobox.js创建的输入框上。

我的问题是如何使输入框与选择控件绑定到的数据绑定到相同的属性。

还有其他选择吗?让我知道您是否需要进一步说明或有任何疑问。请提出建议。

谢谢。


我找到了适合自己情况的解决方案。我使用TypeAhead文本框而不是Autocomplete comobox,并且当用户也将重点放在控件上或按下按钮时,默认情况下会显示选项下拉列表。这样,他们知道他们可以寻找的是我的主要要求。
克里希纳·特雅·维拉玛卡尼尼

Answers:


254

看一下Bootstrap的Select2。它应该能够完成您需要的一切。

另一个不错的选择是Selectize.js。对于Bootstrap来说,它感觉更原生。


27
您如何使用Select2允许数据源中尚未包含的文本输入?
2013年

4
正如@compcentral正确提及的那样,Select2不允许您输入选项列表中未包含的任何内容。使用(自动)标记功能来模拟此操作很麻烦,因为它不接受带有空格的文本。
2013年

2
真是个好发现!我最终使用了Selectize,因为它看起来更像是Bootstrap风格的。
2014年

1
由于@compcentral和Stas指出的问题,我选择使用selectize.js。
尼尔·门罗

1
@compcentral为什么不使用远程数据源方法?
Clain Dsilva'3

23

基本的HTML5数据列表是否有效?这很干净,您不必麻烦的第三方代码。W3SCHOOL教程

MDN文档是非常雄辩和功能的例子。


3
HTML 5的主要问题datalist是它不支持任何DOM事件。因此,每次选择一个值时,都必须在相应的文本框中跳出标签
Pawan 2013年

@Pawan那是不正确的(是吗?)。链接到数据列表的输入至少触发更改并输入事件。看这里,这两种变化和输入事件触发一个控制台日志。
费利克斯·加侬-格尼尔

1
这些年来 这些年来,一直在使用第三方库,而不是简单且干净的已受支持的解决方案...
费利克斯·加侬-格尼尔




By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.