4

我試圖在Tokenfield中的Bootstrap 3中實現一個簡單的標記輸入,但是我已經堆疊在某處。Bootstrap 3中的Tokenfield(標記輸入)自動完成功能不起作用

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> 

錯誤: 它不顯示的自動完成。我在控制檯中沒有任何錯誤。我可以手動添加標籤。

+0

如果您不需要自動完成功能,則不需要jQuery UI和Typeahead Js。初始化令牌字段時只需減少配置對象。 – 2015-03-15 14:26:06

回答

3

從我看到的這是我幾天前的同樣的問題。 你還需要什麼是帶有autocomplete.js的jquery-ui。

http://jqueryui.com/download/生成自己的jquery-ui.min.js,包括autocomplete.js,它應該可以工作。

0

Tokenfield可以與Jquery Ui autocompleteTypeahead Js一起使用。你必須使用其中的一個,但是從上面的代碼你沒有使用任何一個,所以當然不會發生。 從上面的代碼,你想用jQuery UI的自動完成來實現它,所以你需要鏈接到jQuery用戶界面自動完成的CSS和JavaScript

瞭解更多關於Bootstrap Tokenfield here

2

你做一定需要jQuery UI,或Typeahead Js。如果您正在尋找

a simple tags input

沒有自動完成功能,只需初始化這樣

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

希望它幫助。

2
  1. 包括jQuery用戶界面(帶自動完成)
  2. 如果你用「引導模式」或「jQuery的用戶界面對話框」需要一點修正:

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

0

它會工作,如果你包括jquery-ui js和css。

  • 到這個鏈接jquery-ui

  • 下載1.12.0-rc.2的jQuery的版本

  • 在HTML

    都jQuery的ui.css和jQuery的us.js

它爲我工作。