twitter引导程序自动完成下拉列表/带Knockoutjs的组合框



我有一个要求,我必须使用引导程序自动完成下拉列表,但如果用户愿意,可以在该下拉列表中使用自由形式的文本。在你考虑TypeAhead之前,我可以使用Bootstrap TypeAhead文本框,但我需要下拉列表,因为我们想提供一些默认值作为启动选项,以防用户不知道要搜索什么。

我将此与MVC DropDownListFor一起使用,因为它为我们创建了一个选择控件

我找到了这篇为我做这件事的文章。

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

我所要做的就是从选择控件中去掉名称,控件允许我输入自由形式的文本。到目前为止一切都很好。

现在,我将它与Knockoutjs结合使用。我将我的选项和选定的值绑定到选择控件,然后在模板的行渲染上,我调用(selector).combobox(),它使选择控件成为引导程序comobox,并添加一个输入控件,并将选择控件隐藏在后面的场景中。

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

我的问题是如何让输入框数据绑定到与选择控件绑定到的相同的端口。

还有其他选择吗??如果你需要更多的澄清或有问题,请告诉我。请提出建议。

谢谢。

查看Select2 for Bootstrap。它应该能够做你需要的一切。

另一个不错的选择是Selectize.js。

基本的HTML5数据列表能工作吗?它很干净,你不必摆弄混乱的第三方代码。W3SCHOOL教程

MDN文档非常有说服力,并以示例为特色。

Select2 for Bootstrap 3 native plugin

https://fk.github.io/select2-bootstrap-css/index.html

该插件使用select2jquery插件

nuget

PM>安装程序包Select2引导

Fuel UX组合框具有您所期望的所有功能。

我能建议一下吗http://www.jqueryscript.net/form/Twitter-Like-Mentions-Auto-Suggesting-Plugin-with-jQuery-Bootstrap-Suggest.html,的工作原理更像twitter帖子建议,它根据@或#标签、为您提供用户或主题列表

在此处查看演示:http://www.jqueryscript.net/demo/Twitter-Like-Mentions-Auto-Suggesting-Plugin-with-jQuery-Bootstrap-Suggest/

在这个程序中,你可以很容易地将@和#更改为任何你想要的

Bootstrap Tokenfield似乎也不错:http://sliptree.github.io/bootstrap-tokenfield/