logo标签列表

Twitter Bootstrap自动完成下拉/组合框与Knockoutjs

autocompletecomboboxtwitter-bootstrapknockout.jshtml.dropdownlistfor
115
我有一个需求，必须使用Bootstrap自动完成下拉菜单，但是如果用户愿意，他们可以在该下拉菜单中输入自由格式的文本。在考虑TypeAhead之前，我可以使用Bootstrap TypeAhead文本框，但我需要下拉菜单，因为我们希望提供一些默认值作为头部选项，以防用户不知道要搜索什么。我将其与MVC DropDownListFor一起使用，因为它为我们创建了一个选择控件。我找到了这篇文章，可以帮我实现这个功能。

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

我所要做的就是从选择控件中删除名称，这样控件就让我输入自由格式文本了。 到目前为止一切都很好。
现在，我与Knockoutjs一起使用它。 我将我的选项和选定值绑定到选择控件上，然后在模板的行呈现时，我调用（selector）。combobox（），它使选择控件成为引导comobobox并添加输入控件，并在场景后面隐藏选择控件。
现在的问题是当我尝试将值发布到服务器时，由于我在输入框中放置的值不是我给出的选择控件选项之一，因此它始终默认设置为第一个选项。 这是因为我将选定值的绑定设置在选择控件上，而不是在bootstrap-combobox.js创建的输入框上。
我的问题是如何让输入框数据绑定到与选择控件绑定的同一属性。
还有其他选项吗？？ 如果您需要更多澄清或有问题，请告诉我。 请提供建议。
谢谢。
我找到了解决方案。我使用了TypeAhead文本框而不是Autocomplete组合框，并在用户聚焦于控件或按下向下按钮时默认显示选项下拉列表。这样，他们就知道可以查找什么，这是我的主要要求。 - Krishna Veeramachaneni
6个回答
255
27
你如何使用Select2允许在数据源中不存在的文本输入？ - compcentral
4
正如@compcentral所正确提到的，Select2不允许您输入不在选项列表中的任何内容。使用（自动）标记功能来模拟这一点很麻烦，因为它不接受带有空格的文本。 - Stas Slabko
1
@compcentral 为什么你不使用远程数据源的方法？ - Clain Dsilva
1
Selectize.js没有提供完整的示例代码，包括HTML。这是浪费时间，因为最终你会调试他们的示例代码，以找出为什么它不起作用。 - derloopkat
为了在selectize.js和bootstrap 4中使用css，我不得不使用https://github.com/const-se/selectize-bootstrap4-theme中的css而不是默认的css；然后，当按下退格键以清除选择时，有时输入字段宽度太小，输入时文本不可见 - 我不得不使用这个技巧：https://github.com/selectize/selectize.js/issues/851#issuecomment-132348605 - xhafan
27

基本的HTML5 datalist工作吗？它很简洁，不需要使用混乱的第三方代码。 W3SCHOOL教程

MDN文档非常详细，并提供了示例。

3
HTML 5 中 datalist 的主要问题在于它不支持任何 DOM 事件。因此，每次选择一个值时，你必须切换到相应的文本框之外。 - Pawan
@Pawan 这不再是真的了吗？与数据列表相关联的输入会触发更改和输入事件。请看这里：https://jsfiddle.net/erfb60mg/，更改和输入事件都会触发控制台日志。 - Félix Adriyel Gagnon-Grenier
这是您的意思吗？ tab out：（计算机，图形用户界面）同时按下 Tab 键和修饰键以在选项卡或窗口之间移动。 - carloswm85
3
1
你好。这里第一个被赞的答案有什么不同吗？据我所见，你复制了select 2建议？ - Félix Adriyel Gagnon-Grenier
@FélixAdriyelGagnon-Grenier 它们属于不同的存储库。https://github.com/select2/select2 和这个答案中的 https://github.com/t0m/select2-bootstrap-css/tree/bootstrap3 - carloswm85
@carloswm85 谢谢。然而，后者似乎是前者的一个分支，已经被放弃了8年。 - Félix Adriyel Gagnon-Grenier
1
1
据我所见，它没有类型预测。 - jpkeisala
1
0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接