首先，版本问题
我们在拿来的同时一定要搞明白自己用的是哪个版本，官方应该都有注明两个插件的配合都需要哪个版本，这也是最基础的了，但是我们需要花费大量的事件去阅读文档，因为不同版本的功能、文档啊，肯定是有差异的当我们遇到一些莫名奇妙的问题，很可能是版本问题，这也是我们分析问题首先要考虑的因素,因为他确实很常见。
数据源问题
我们可以参考tagsinput官方网站；这个官方网站所提供的示例；文档很全，但是偏偏在我们最需要的使用的地方却是寥寥几笔；下面我要说的这个问题很大一部分人都遇到过，废话不多说上代码：
elt.tagsinput({
typeahead: {
source: function () {
return [];
},
freeInput: true,
showHintOnFocus: 'all',
afterSelect: function () {
$('.bootstrap-tagsinput input').val('');
}
}
})
在这里source所需要的是个数组或者是一个function返回值为一个数组;并且typeahead官方文档里面也提供了异步回调的方法来填充这个source;tagsinput文档的最后也涉及了这种方式但是只有大概一句话这个样子，并没有说明白，这里就比较坑了，让我看一下为什么会坑，上代码就知道了:
$('input').tagsinput({
typeahead: {
source: function(query) {
return $.get('http://someservice.com');
}
}
});
这个是tagsinput文档提供的，需要注意的是在source里面使用query参数，这个参数既是input 的change事件中的value；那么问题来了，我们可不可以这样写
$('input').tagsinput({
typeahead: {
source: function(query) {
return $.ajax({
url: 'http://someservice.com',
type: 'GET',
data: {v: query},
success: function(result) {
// do somthing
}
});
}
}
});
结果是，肯定的，肯定不行，（因为后台给我返回的惨数据json是需要我们进行一番处理的状态码啊之类的）；那该怎么办，无法获取异步的数据？来来，让我们看一下bootstrap3-typeahead这个是配合主流bootstrap3使用的typeahead，还是要看文档，git地址；看了一下文档也在这里面；我们看到下面文档：
Name Type Default Description
source array, function [] The data source to query against. May be an array of strings, an array of JSON object with a name property or a function. The function accepts two arguments, the query value in the input field and the process callback. The function may be used synchronously by returning the data source directly or asynchronously via the process callback's single argument.
这里面是对source的描述，我们可以看到source类型可以使数组，或者是一个返回数组的function 默认类型是数组 描述中可以看到如果是function的时候可以接收两个参数，第一个是query这个就是我们上面提到过的，第二个参数是process就是用它可以获取异步回掉的数据，是不是好兴奋，感觉也不过如此；
往往这个时候我们都会被直接打脸，看一下打不打脸；
$('input').tagsinput({
typeahead: {
source: function(query, process) {
return $.ajax({
url: 'http://someservice.com',
type: 'GET',
data: {v: query},
success: function(result) {
// do somthing
return process(result) // 对不起直接报错，告诉你没有这个方法；
}
});
}
}
});
不对啊，赶紧翻文档上网上找例子，用法没问题啊，可是为什么会这样；我们仔细分析tagsinput和typeahead所给出的同一个例子，不难发现，这里果然是有问题的，那么问题出在哪里了呢；让我看一下，为什么例子只传了一个query参数，没错因为它只能传一个参数，不然也不会报process不存在，不是function这样的错误；可是typeahead文档上明明写着接收两个参数难道是骗人的，你会去拿单独的例子去试验不放在tagsinput的那种情况，结果两个参数，没问题；那么问题就一定出在了，tagsinput本身，是的，就是tagsinput本身的问题；
我们在看typeahead所给出的示例下面有一个链接，这个是FAQ的链接，我们点进去，可以看到置顶的一个阿拉伯人遇到了，跟你一样的情况；在process不存在，而且他也尝试了单独使用typeahead的情况下，确实没有问题；下面是作者，对着干问题的解释，没错，我猜你大概也想到了，就是tagsinput把source重写了，xxx的，废了这么大半天的劲问题居然出在了这里，好了，下面我们知道问题出在了，源码，你那么我们就去找源码，改成你需要的样子就好了源码就在你所引用的tagsinput.js中，搜索source，找到source的function
source: function (b, c) {
function d(a) {
if (typeof a == 'string') {
var a = JSON.parse(a);
}
for (var b = [], d = 0; d < a.length; d++) {
var g = e.options.itemText(a[d]);
f[g] = a[d], b.push(g)
}
c(b)
}
this.map = {};
var f = this.map, g = i.source(b);
a.isFunction(g.success) ? g.success(d) : a.isFunction(g.then) ? g.then(d) : a.when(g).then(d)
}
像这样，if(typeof a == 'string') {var a = JSON.parse(a)} 这里就是我根据我的需求加上的；
好痛苦，所以一份详细的文档对于一个插件有多重要啊，这样一个小问题就会花掉你好长一段时间去研究。。。
网友评论