BootstrapTagsInput-基础避坑指南

本文介绍了BootstrapTagsInput的使用,包括基础用法、与Typeahead的结合以及遇到的坑。在Typeahead部分,文章详细阐述了typeaheadjs和Bootstrap 3 Typeahead的区别,分析了它们的示例代码和可能出现的问题,如显示值与实际值不一致、预输入下拉不显示等。通过解决这些问题,作者提供了实用的解决方案和代码示例。

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

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表中有其对应的描述。

如果你只是直接复制示例代码,直接运行,你会遇到别的坑,但是我要说的是,睁大眼睛,仔细观瞧!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值