多对象数组在 At.js 中不起作用

Multiple object array not working in At.js

我正在使用 At.js plugin. It's working fine for a single object (demo)

var names1 = ["Jacob", "Isabella", "Ethan", "Emma", "Daniel", "Madison"];
var names = $.map(names1, function(value, i) {
  return {
    'id': i,
    'name': value,
    'email': value + '@yahoo.com'
  };
});

但是当我尝试添加多个对象时它不起作用 (demo)。我知道代码是问题所在。 我想在用户使用 @ 标签选择人名时显示描述。

$(function() {
  $.fn.atwho.debug = true

  var names1 = [{
      "name": "Jacob",
      "description": "description one description one description one"
    },
    {
      "name": "Isabella",
      "description": "description two description two description two"
    }
  ];

  var names = $.map(names1, function(value, description, i) {
    return {
      'id': i,
      'name': value,
      'email': description
    };
  });

  var at_config = {
    at: "@",
    data: names,
    headerTpl: '<div class="atwho-header">Service List <small>↑&nbsp;↓&nbsp;</small></div>',
    insertTpl: '${email}',
    displayTpl: "<li>${name}</li>",
    limit: 200
  }
  $inputor = $('#inputor').atwho(at_config);
  $inputor.caret('pos', 47);
  $inputor.focus().atwho('run');
});

Jquery中的map函数并不是把对象中的每一个元素作为函数参数,你得到的是整个对象(列表中的元素)然后需要提取名称,以及描述。你快到了。

$(function() {
  $.fn.atwho.debug = true

  var names1 = [{
      "name": "Jacob",
      "description": "description one description one description one"
    },
    {
      "name": "Isabella",
      "description": "description two description two description two"
    }
  ];

  var names = $.map(names1, function(value, index) { //Here I have only used value
    return {
      'id': index,
      'name': value.name, //Here I take value.name from the object
      'email': value.description //And value.description from the object
    };
  });

  var at_config = {
    at: "@",
    data: names,
    headerTpl: '<div class="atwho-header">Service List <small>↑&nbsp;↓&nbsp;</small></div>',
    insertTpl: '${email}',
    displayTpl: "<li>${name}</li>",
    limit: 200
  }
  $inputor = $('#inputor').atwho(at_config);
  $inputor.caret('pos', 47);
  $inputor.focus().atwho('run');
});