1.簡介
BootstrapTagsInput是一個基於jQuery和Bootstrap.css的用於管理標籤的插件。
官網在這:官網
這個官網呢,怎麼說呢,比較簡潔。示例聊勝於無。
最簡單的用法就是在引入jquery,和Bootstrap的前提下,在input標籤中添加 data-role="tagsinput",即可初始化。
<input type="text" value="" data-role="tagsinput" />
原因在於下方代碼,代碼最後一部分,寫了是如何初始化的。
/**
* Initialize tagsinput behaviour on inputs and selects which have
* data-role=tagsinput
*/
$(function() {
$("input[data-role=tagsinput], select[multiple][data-role=tagsinput]").tagsinput();
});
還有一個通過 select標籤初始化的方式。並在標籤加上 multiple 屬性,在通過$("select").tagsinput('items'),獲取值時,返回的是一個數組,而不是逗號分隔的字符串了。
<select multiple data-role="tagsinput">
<option value="Amsterdam">Amsterdam</option>
<option value="Washington">Washington</option>
<option value="Sydney">Sydney</option>
<option value="Beijing">Beijing</option>
<option value="Cairo">Cairo</option>
</select>
以上兩個方法都會將現有value值或者option元素,自動設置爲標籤。
2.Typeahead&Typeahead
一般來說,如果你只使用輸入,回車成爲標籤的功能,那你可能遇不到什麼坑。
但是一旦你遇到了根據用戶輸入顯示相關補全/提示/預輸入的需求時,坑就來了。
2.1 Typeahead(預先輸入)
在其文檔中,有一個介紹,就是關於Typeahead的,他是這麼說的:
Typeahead is not included in Bootstrap 3, so you'll have to include your own typeahead library. I'd recommed typeahead.js. An example of using this is shown below.
大意是:Bootstrap 3中已經不包含Typeahead啦,如果你想用,你必須自己引入的Typeahead庫。
我們推薦了typeahead.js。下面是使用此示例的示例。巴拉巴拉。
<input type="text" value="Amsterdam,Washington" data-role="tagsinput" />
<script>
var citynames = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
prefetch: {
url: 'assets/citynames.json',
filter: function(list) {
return $.map(list, function(cityname) {
return { name: cityname }; });
}
}
});
citynames.initialize();
$('input').tagsinput({
typeaheadjs: {
name: 'citynames',
displayKey: 'name',
valueKey: 'name',
source: citynames.ttAdapter()
}
});
</script>
-------------------------------------------------------------------------------------------------------------------------------------------------------------
然後在其文檔下方有個Options介紹表,裏面有一項關於typeahead的介紹,其中關於source的介紹是:
An array (or function returning a promise or array), which will be used as source for a typeahead.
大意是:一個數組(或返回一個承諾或數組的函數),它將用typeahead的數據源。
2.2 眼睛瞪得像銅鈴 射出閃電般的精明
說實話,tagsinput 這文檔給我一種什麼感覺呢?
就是=>饒你奸似鬼!照樣喝老孃的洗腳水!
上面說了,他給了一個推薦的Typeahead示列,然後下方的option表中有其對應的描述。
如果你只是直接複製示例代碼,直接運行,你會遇到別的坑,但是我要說的是,睜大眼睛,仔細觀瞧!
在初始化tagsinput時有兩個預輸入選項,一個是typeaheadjs,另一個是typeahead。
看出區別了嗎?區別多了一個js!!!!!