Question

我正在尝试使用Tokenfield在Bootstrap 3中实现一个简单的标签输入，但我已经堆积在某处。

HTML code：

<link href="/static/css/bootstrap.min.css" rel="stylesheet">
<link href="/static/css/bootstrap-tokenfield.min.css" rel="stylesheet">

<div class="form-group">
   <label for="myinput">Κατηγορία</label>
   <input id="myinput" type="text" class="form-control">
</div>

使用Javascript：

<script src="/static/js/jquery.min.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
<script src="/static/js/bootstrap-tokenfield.min.js"></script>

<script type="text/javascript">
   $('#myinput').tokenfield({
  autocomplete: {
    source: ['red','blue','green','yellow','violet','brown','purple','black','white'],
    delay: 100
  },
  showAutocompleteOnFocus: true
})
</script>

错误：它不显示自动完成。我在控制台中没有任何错误。我可以手动添加标签。

Answer 1

从我看到的情况来看，这与我几天前遇到的问题相同。你需要的是jquery-ui和autocomplete.js。

http://jqueryui.com/download/生成你自己的jquery-ui.min.js，包括autocomplete.js，它应该可以工作。

Answer 2

您 NOT 必须 jQuery UI ， Typeahead Js 。如果您正在寻找

简单的标签输入

没有自动填充功能功能，只需像这样初始化

 $('#myinput').tokenfield();

希望它有所帮助。

Answer 3

包含jQuery UI（带自动填充功能）
如果您使用“Bootstrap模式”或“jQuery-UI对话框”，请稍加修复：

.ui-autocomplete { z-index: 5000; }

Answer 4

Tokenfield适用于Jquery Ui autocomplete或Typeahead Js。您必须使用其中一个，但是从上面的代码中您没有使用它们中的任何一个，所以当然不会发生任何事情。从上面的代码，你试图用Jquery Ui自动完成实现它，所以你需要链接到jquery Ui自动完成的css和javascript

详细了解Bootstrap Tokenfield here

Answer 5

我知道这个答案很晚，但设置查询数据的自动完成属性不是source，而是lookup。

Tokenfield在http://sliptree.github.io/bootstrap-tokenfield/#options的示例未更新。

您可以在https://github.com/devbridge/jQuery-Autocomplete

中看到正确的属性为lookup

Answer 6

如果同时包含jquery-ui js和css，它将起作用。

转到此链接jquery-ui
下载jquery的1.12.0-rc.2版本
在你的html中包含jquery-ui.css和jquery-us.js

它对我有用。

Bootstrap 3中的Tokenfield（标记输入）自动完成功能不起作用

6 个答案: