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>