4

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

HTML 代码：

<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>

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

4

6 回答 6

3

从我所看到的情况来看，这与我几天前遇到的问题相同。您还需要带有 autocomplete.js 的 jquery-ui。

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

于 2014-10-17T08:29:23.157 回答
3

您不一定需要jQuery UI或Typeahead Js。如果您正在寻找

一个简单的标签输入

没有自动完成功能，只需像这样初始化

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

希望它有所帮助。

于 2015-03-15T14:25:09.930 回答
2
  1. 包括 jQuery UI（带有自动完成功能）
  2. 如果您使用“Bootstrap modal”或“jQuery-UI dialog”，请稍作修正：

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

于 2016-11-24T04:37:15.417 回答
1

Tokenfield可以与Jquery Ui 自动完成或Typeahead Js一起使用。您必须使用其中之一，但从上面的代码中您没有使用其中任何一个，所以当然不会发生任何事情。从上面的代码中，您正在尝试使用 Jquery Ui 自动完成来实现它，因此您需要链接到 jquery Ui 自动完成的 css 和 javascript

在此处阅读有关Bootstrap Tokenfield 的更多信息

于 2015-02-24T06:26:31.263 回答
0

我知道这个答案来得很晚，但是用于设置查找数据的自动完成属性不是sourcebut lookup。

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

可以看到正确的属性lookup来自https://github.com/devbridge/jQuery-Autocomplete

于 2016-03-02T08:41:31.320 回答
0

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

  • 转到此链接jquery-ui

  • 下载jquery 1.12.0-rc.2版本

  • 在您的 html 中同时包含 jquery-ui.css 和 jquery-us.js

它对我有用。

于 2017-02-09T06:24:39.643 回答