新浪微博，微信@功能jquery插件，@xxsome,ajax請求數據，前端渲染列表項選擇！

jquery.mentsInput插件使用：
官網：http://podio.github.io/jquery...
官網有使用簡介，這裏記錄下插件使用過程遇到的坑。
js部分：
if( settings.elastic ) {
elmInputBox.elastic();
}
會報錯，這裏註釋掉 elmInputBox.elastic();能夠繼續使用。
使用中數據格式是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);

}
});
發請求後api返回數據結構是這樣的：
[{
"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
}]

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

if(v.name!=null){
                        return v.name;
                    }
                });
                var arr = [];
                for (var i = 0;i<info.length;i++){
                    var obj ={};
                    obj.id =info[i].asin;
                    obj.name = info[i].name;
                    obj.avatar = info[i].image_url;
                    obj.type='contact';
                    arr.push(obj);
                }

預期的數據結構這樣：
{
'id' : 1,
'name' : 'Kenneth Auchenberg',
'avatar': 'http://cdn0.4dots.com/i/custo...',
'icon' : 'icon-16 icon-person',
'type' : 'contact'
}
我把id這個參數換成了要反會給後端的asin（相似id），在列表項顯示產品名稱，選擇對應的產品後，
會替換成對應的產品asin；而後在調用getMentions這個函數獲取數據傳給後端。
var asin = '';

$('#asin').mentionsInput('getMentions', function(data) {
        $.each(data,function (index,val) {
            asin += val.id+';'
        })
    });

完整栗子以下：

<textarea id="asin" placeholder="請使用@產品名模糊查詢後選擇對應產品" cols="140" rows="7"></textarea>
</div>
<div style="margin-bottom: 30px">
<button id="download" class="btn btn-success">下載Excel</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/jashkenas/underscore/1.8.3/underscore-min.js"></script>
<script src='../assets/js/jquery-mentionsInput.js' type='text/javascript'></script>
<script src="../assets/js/jquery.toast.min.js"></script>
   <script>

$(function () {
    $('#asin').mentionsInput({
        onDataRequest:function (mode, query, callback) {
            $.getJSON(G.Url+'product?name='+query, function(resData) {
                var info = $.grep(JSON.parse(resData),function (v,i) {
                    if(v.name!=null){
                        return v.name;
                    }
                });
                var arr = [];
                for (var i = 0;i<info.length;i++){
                    var obj ={};
                    obj.id =info[i].asin;
                    obj.name = info[i].name;
                    obj.avatar = info[i].image_url;
                    obj.type='contact';
                    arr.push(obj);
                }

                onDataRequest = _.filter(arr,
                        function(item) {
                            return item.name.toLowerCase().indexOf(query.toLowerCase()) > -1
                        });
                callback.call(this, onDataRequest);
            });
        }

    });
});

$('#download').click(function () {
    var asin = '';
    $('#asin').mentionsInput('getMentions', function(data) {
        $.each(data,function (index,val) {
            asin += val.id+';'
        })
    });

    $('<form action="'+G.Url+'template/excel" method="post"     enctype="application/json">' +
            '<input type="text" name="category" value="price_correlation_analysis">' +
            '</form>').append($('<input/>').attr('name','info').val(asin)).submit().remove();
});

</script>