使用 Knockoutjs Bootstrap 自动完成下拉/组合框

我有一个需求,我必须使用引导自动完成下拉,但用户可以有自由形式的文字下拉如果他们愿意。在考虑 TypeAhead 之前,我可以使用 Bootstrap TypeAhead 文本框,但是我需要一个下拉列表,因为我们希望给出一些默认值作为 headstart 选项,以防用户不知道要搜索什么。

我使用 MVC DropDownListFor 来创建一个选择控件。

I found this article which does that for me.

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

我所要做的就是从选择控件中删除名称,而控件允许我输入自由格式的文本。目前一切正常。

现在,我要把它和 Knockoutjs 结合起来使用。我将我的选项和选择值绑定到选择控件,然后在模板的渲染行上调用(selector)。Combobox () ,它使选择控件成为一个引导的 comobobox,并添加一个输入控件,并在后台隐藏选择控件。

现在的问题是,当我尝试让他的值张贴到服务器,因为我放在输入框的值不是一个有效的选项,我给选择控件的选项,它总是设置为第一个选项默认。这是因为,我将选定值的绑定设置在 select 控件上,而不是在由 bootstrap-combobox 创建的输入框上。JS.

My question is how do I get the input box to data-bind to the same porperty as the the select control was bound to.

还有别的选择吗? Let me know if you need more clarification or have questions. 请建议。

Thanks.

319764 次浏览

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

另一个不错的选择是 < strong > Selectie.js ,它感觉更适合 Bootstrap。

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

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

燃料用户体验组合框 具有您所期望的所有特性。

Select2 for Bootstrap 3 native plugin

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

this plugin uses select2 jquery plugin

Nuget

PM > 安装-软件包选择2-Bootstrap

我可以建议使用 http://www.jqueryscript.net/form/Twitter-Like-Mentions-Auto-Suggesting-Plugin-with-jQuery-Bootstrap-Suggest.html吗? 它的工作原理更像 Twitter 帖子建议,它给你一个基于@或 # 标签的用户或主题列表,

view demo here: http://www.jqueryscript.net/demo/Twitter-Like-Mentions-Auto-Suggesting-Plugin-with-jQuery-Bootstrap-Suggest/

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

Bootstrap Tokenfield 看起来也不错: http://sliptree.github.io/bootstrap-tokenfield/