摘要：插件使用官網官網有使用簡介，這里記錄下插件使用過程遇到的坑。使用中數(shù)據(jù)格式是這樣的發(fā)請求后返回數(shù)據(jù)結構是這樣的所以將數(shù)據(jù)結構寫成符合預期的這個參數(shù)可能有幾個是會報錯，過濾掉。完整栗子如下請使用產品名模糊查詢后選擇對應產品下載

jquery.mentsInput插件使用：
官網：http://podio.github.io/jquery...
官網有使用簡介，這里記錄下插件使用過程遇到的坑。
js部分：
if( settings.elastic ) {
elmInputBox.elastic();
}
會報錯，這里注釋掉 elmInputBox.elastic();可以繼續(xù)使用。
使用中數(shù)據(jù)格式是data這樣的：

$("textarea.mention").mentionsInput({
onDataRequest:function (mode, query, callback) {
var data = [

  { id:1, name:"Kenneth Auchenberg", "avatar":"http://cdn0.4dots.com/i/customavatars/avatar7112_1.gif", "type":"contact" },
  { id:2, name:"Jon Froda", "avatar":"http://cdn0.4dots.com/i/customavatars/avatar7112_1.gif", "type":"contact" },
  { id:3, name:"Anders Pollas", "avatar":"http://cdn0.4dots.com/i/customavatars/avatar7112_1.gif", "type":"contact" },
  { id:4, name:"Kasper Hulthin", "avatar":"http://cdn0.4dots.com/i/customavatars/avatar7112_1.gif", "type":"contact" },
  { id:5, name:"Andreas Haugstrup", "avatar":"http://cdn0.4dots.com/i/customavatars/avatar7112_1.gif", "type":"contact" },
  { id:6, name:"Pete Lacey", "avatar":"http://cdn0.4dots.com/i/customavatars/avatar7112_1.gif", "type":"contact" }
];

data = _.filter(data, function(item) { return item.name.toLowerCase().indexOf(query.toLowerCase()) > -1 });

callback.call(this, data);

}
});
發(fā)請求后api返回數(shù)據(jù)結構是這樣的：
[{
"last_update_time":1479719379472,
"asin":"B012AADEMI",
"list_price":null,
"name":"WildBird Care Vertical Pull-out Tray Bird Feeder BCF4A,
Natural color", "publisher":"WildBird Care LLC",
"product_width":9.0,
"product_length":6.0,
"storage_item":[
],
"brand":"WildBird Care",
"purchase_items":[
],
"standard_sku":null,
"product_type_name":"PET_SUPPLIES",
"image_url":"http://ecx.images-amazon.com/...",
"product_height":14.2,
"product_group":"Pet Products",
"id":"bbd45493-baa0-4862-ab24-7083ea203b88",
"product_weight":2.4
},
{
"last_update_time":1479859200000,
"asin":"B012AADEWI",
"list_price":24.15,
"name":"WildBird Care Wooden Upside-down Suet Feeder BCF2A,
Natural Color", "publisher":"WildBird Care LLC",
"product_width":9.1,
"product_length":9.3,
"storage_item":[
],
"brand":"WildBird Care",
"purchase_items":[
],
"standard_sku":null,
"product_type_name":"PET_SUPPLIES",
"image_url":"http://ecx.images-amazon.com/...",
"product_height":4.7,
"product_group":"Pet Products",
"id":"87a04d9b-0b69-4e3d-a19f-19f3d4bdb4f0",
"product_weight":1.95
}]

所以將數(shù)據(jù)結構寫成符合預期的：name這個參數(shù)可能有幾個是 null會報錯，過濾掉。
var info = $.grep(JSON.parse(resData),function (v,i) {

                    if(v.name!=null){
                        return v.name;
                    }
                });
                var arr = [];
                for (var i = 0;i
預期的數(shù)據(jù)結構這樣： 
 {
  "id"    : 1,
  "name"  : "Kenneth Auchenberg",
  "avatar": "http://cdn0.4dots.com/i/custo...",
  "icon"  : "icon-16 icon-person",
  "type"  : "contact"
}
我把id這個參數(shù)換成了要反會給后端的asin（類似id），在列表項顯示產品名稱，選擇對應的產品后，
會替換成對應的產品asin；然后在調用getMentions這個函數(shù)獲取數(shù)據(jù)傳給后端。
   var asin = "";
    $("#asin").mentionsInput("getMentions", function(data) {
        $.each(data,function (index,val) {
            asin += val.id+";"
        })
    });

完整栗子如下：