html输入框插件,Bootstrap tagsinput标签输入框插件

最新推荐文章于 2022-06-23 15:14:59 发布

百菜物联

最新推荐文章于 2022-06-23 15:14:59 发布

阅读量647

点赞数

文章标签： html输入框插件

本文介绍了如何使用Bootstrap tagsinput插件将输入框转换为标签输入框，包括基本使用方法、与select元素的结合、与typeahead.js的整合，以及如何使用对象作为标签并展示不同情景的标签。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

基本示例

在输入框中添加data-role="tagsinput"属性，输入框的值会自动转换为标签。

方法

返回值

$("select").val()

"Amsterdam,Washington,Sydney,Beijing,Cairo"

$("select").tagsinput('items')

["Amsterdam","Washington","Sydney","Beijing"]

通过select元素来制作标签

通过元可以将下拉框中的所有option转换为标签。

Amsterdam

Washington

Sydney

Beijing

Cairo

Amsterdam

Washington

Sydney

Beijing

Cairo

方法

返回值

$("select").val()

["Amsterdam","Washington","Sydney","Beijing","Cairo"]

$("select").tagsinput('items')

["Amsterdam","Washington","Sydney","Beijing"]

与typeahead.js结合使用

该插件可以和typeahead.js结合使用，在输入标签时获取预定义的提示标签信息。示例需要在服务器环境下才能调用json数据。

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

displayKey: 'name',

valueKey: 'name',

source: citynames.ttAdapter()

}

});

方法

返回值

$("select").val()

"Amsterdam,Washington"

$("select").tagsinput('items')

["Amsterdam","Washington"]

使用对象作为标签

除了使用字符串作为标签之外，你还可以使用对象作为标签。这样做的好处是你在获取标签值的时候，可以获取到该对象的id值。示例需要在服务器环境下才能调用json数据。

var cities = new Bloodhound({

datumTokenizer: Bloodhound.tokenizers.obj.whitespace('text'),

queryTokenizer: Bloodhound.tokenizers.whitespace,

prefetch: 'assets/cities.json'

});

cities.initialize();

var elt = $('input');

elt.tagsinput({

itemValue: 'value',

itemText: 'text',

typeaheadjs: {

displayKey: 'text',

source: cities.ttAdapter()

}

});

elt.tagsinput('add', { "value": 1 , "text": "Amsterdam" , "continent": "Europe" });

elt.tagsinput('add', { "value": 4 , "text": "Washington" , "continent": "America" });

elt.tagsinput('add', { "value": 7 , "text": "Sydney" , "continent": "Australia" });

elt.tagsinput('add', { "value": 10, "text": "Beijing" , "continent": "Asia" });

elt.tagsinput('add', { "value": 13, "text": "Cairo" , "continent": "Africa" });

方法

返回值

$("select").val()

"1,4,7,10,13"

$("select").tagsinput('items')

[{"value":1,"text":"Amsterdam","continent":"Europe"},{"value":4,"text":"Washington","continent":"America"},{"value":7,"text":"Sydney","continent":"Australia"},{"value":10,"text":"Beijing","continent":"Asia"},{"value":13,"text":"Cairo","continent":"Africa"}]

情景类标签

可以通过颜色来区分不同情景的标签。

var cities = new Bloodhound({

datumTokenizer: Bloodhound.tokenizers.obj.whitespace('text'),

queryTokenizer: Bloodhound.tokenizers.whitespace,

prefetch: 'assets/cities.json'

});

cities.initialize();

var elt = $('input');

elt.tagsinput({

tagClass: function(item) {

switch (item.continent) {

case 'Europe' : return 'label label-primary';

case 'America' : return 'label label-danger label-important';

case 'Australia': return 'label label-success';

case 'Africa' : return 'label label-default';

case 'Asia' : return 'label label-warning';

}

itemValue: 'value',

itemText: 'text',

typeaheadjs: {

displayKey: 'text',

source: cities.ttAdapter()

}

});

elt.tagsinput('add', { "value": 1 , "text": "Amsterdam" , "continent": "Europe" });

elt.tagsinput('add', { "value": 4 , "text": "Washington" , "continent": "America" });

elt.tagsinput('add', { "value": 7 , "text": "Sydney" , "continent": "Australia" });

elt.tagsinput('add', { "value": 10, "text": "Beijing" , "continent": "Asia" });

elt.tagsinput('add', { "value": 13, "text": "Cairo" , "continent": "Africa" });

方法

返回值

$("select").val()

"1,4,7,10,13"

$("select").tagsinput('items')