推特引导自动完成下拉/组合框与 Knockoutjs [英] twitter bootstrap autocomplete dropdown / combobox with Knockoutjs

问题描述

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

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

我发现这篇文章可以帮助我做到这一点.

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

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

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

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

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

还有其他选择吗??如果您需要更多说明或有疑问，请告诉我.请建议.

谢谢.

解决方案

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

另一个不错的选择是 Selectize.js.感觉更像是 Bootstrap 的原生.

I have a requirement where I HAVE TO use bootstrap autocomplete dropdown, BUT user can have free form text in that dropdown if they wish. Before you think about TypeAhead, I could use Bootstrap TypeAhead textbox, but I need to have the dropdown becasue we want to give some default values as headstart options in case users dont know what to search for.

I am using this with MVC DropDownListFor as that creates a select control for us.

I found this article which does that for me.

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

All I had to do was take off the name from the select control and the control was letting me enter free form text. All good so far.

Now, I am using this in conjunction with Knockoutjs. I bind my options and selected value to the select control and then on row rendered of my template, I called (selector).combobox() which makes the select control a bootstrap comobobox and adds an input control and hides the select control in the scenes behind.

The problem now is when I try to get he values to post to server, since the value I put in input box is not a valid options from the options I gave to select control, it is always setting it to the first option by default. This is becasue, I set the binding of the selected value on select control and not on the input box which was created by 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.

Any other options?? Let me know if you need more clarification or have questions. Please suggest.

Thanks.

解决方案

Have a look at Select2 for Bootstrap. It should be able to do everything you need.

Another good option is Selectize.js. It feels a bit more native to Bootstrap.

这篇关于推特引导自动完成下拉/组合框与 Knockoutjs的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！