Javascript 使用Google联系人填充Jquery自动完成

有没有办法用谷歌联系人填充Jquery自动完成列表？到目前为止，我一直在使用以下代码用谷歌电子表格中的值填充自动完成列表来显示用户名建议和用户配置文件图片，但是我真的想用我的谷歌联系人作为数据源。我应该如何更改代码来实现这一点

Autocomplete.html

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags" />
</div>

<script>
// This code in this function runs when the page is loaded.
$(function() {
  google.script.run.withSuccessHandler(buildTagList)
      .getAvailableTags();
});

function buildTagList(availableTags) {
  $( "#tags" ).autocomplete({
    source: availableTags
  })
  .autocomplete( "instance" )._renderItem = function( ul, item ) {
    return $( "<li><div><img src='"+item.img+"'><span>"+item.value+"</span></div></li>" ).appendTo( ul );
  };
}
</script>

标签：
//此函数中的代码在加载页面时运行。
$（函数（）{
google.script.run.withSuccessHandler（buildTagList）
.getAvailableTags（）；
});
函数构建标记列表（可用标记）{
$（“#标记”）.autocomplete({
资料来源：availableTags
})
.autocomplete（“实例”）。\u renderItem=函数（ul，项）{
返回$（“
”+项目值+“
”）。附录（ul）；
};
}

getAvailableTags（）

函数getAvailableTags（）{ var ss=SpreadsheetApp.openById（“0AVT7ejriwlxudgzfv2xjugjzlxktm2Rhqu1rugtasc”）； var s=ss.getSheetByName（“选项”）； var data=s.getDataRange（）.getValues（）； var headers=1；//顶部要跳过的标题行数 var tagColumn=0；//包含标记的列#（基于0） var availableTags=[]； 对于（var行=标题；行我相信你的目标如下

• 从评论中的讨论中，您希望使用People API检索用户名和用户照片图像。
  • 当使用people.connections.list of people API方法时，官方文档称

    提供了经过身份验证的用户的联系人列表

    。在这种情况下，您希望使用此数据
• 您希望使用谷歌应用程序脚本实现这一点

示例脚本： 在这种情况下，请修改

getAvailableTags（）

，如下所示。在使用此脚本之前

注:

• 在此修改中，

  pageSize

  使用

  1000

  。当您的联系人数超过1000时。请告诉我

参考：

补充： 关于你的第二个问题

，我可以请你告诉我如何从我的联系人中提取另一个值吗？例如，如果我决定也包括电子邮件和电话号码，我应该怎么做？我希望它看起来像这样-左边的图片和名字，电子邮件，电话号码都在新行中。

。我想回答如下。 在这种情况下，请按如下方式修改上述示例脚本

修改脚本： 函数getAvailableTags（）{ const contacts=People.People.Connections.list（“People/me”，{personFields:“姓名、照片、电子邮件地址、电话号码”，页面大小：1000}）； 常数res=触点。减少（（ar，c）=>{ 如果（c.hasOwnProperty（“名称”）和c.hasOwnProperty（“照片”））{ const name=c.names[0].displayName； const img=c.photos.filter（p=>p.default）[0]； 让值=名称； 如果（c.hasOwnProperty（“emailAddresses”））值+=“
”+c.emailAddresses[0]。值； 如果（c.hasOwnProperty（“phoneNumbers”））值+=“
”+c.phoneNumbers[0]。值； ar.push（{id:name，value:value，label:name，img:img.url}）； } 返回ar； }, []); 返回res； }

---

我不得不为我糟糕的英语技能道歉。不幸的是，从您的问题和脚本中，我无法理解

是否有任何方法可以用Google联系人填充Jquery自动完成列表？

。我可以问一下细节吗？亲爱的@Tanaike，很抱歉没有说清楚。好的，我知道我正在使用jqueryautocomplete和谷歌电子表格作为数据源。因此，每当我开始在输入字段中输入联系人姓名时，我都会收到电子表格中的自动完成建议。但是我不想使用谷歌表单，而是希望能够使用我的谷歌联系人作为自动完成的数据源。这样以后我就不会那么混乱了。谢谢你的回复。我知道您希望使用来自Google联系人的值作为autocomplete的值。在这种情况下，您希望使用哪种类型的值？我无法理解

中的值用谷歌电子表格中的值填充自动完成列表，以显示用户名建议和用户配置文件图片

。亲爱的@Tanaike，在我键入（比如）名字“John”时，随时使用我当前的代码，我从我的数据源电子表格的a列中得到了一大堆自动完成建议，其中包括每个约翰的全名（例如“约翰·列侬”、“约翰·韦恩”、“约翰·肯尼迪”）。我还从B列中获取了他们的图片，因为该列有图片URL。我想获得同样的结果，但使用谷歌工作表的istead作为数据源。有点像在电子表格单元格中添加注释并键入“@”-你会得到一个下拉列表，其中包含可用的谷歌联系人，可以搜索。我希望能够有一个类似的访问我的谷歌联系人，但通过输入字段，无需键入“@”symbolDear@Tanaike，代码工作得很好！非常感谢你！我还可以请你告诉我如何从我的联系人中提取另一个值吗？例如，如果我决定也包括电子邮件和电话号码，我应该怎么做？我希望它看起来像-左边的图片和姓名，电子邮件，电话号码在新的行每一个。再次非常感谢。@Michael感谢您的回复。我很高兴你的问题解决了。从你的回答中，我可以理解你的问题已经解决了。关于你的新问题，我在回答中添加了答案。你能确认一下吗？如果我对你的第二个问题的理解不正确，我很抱歉。亲爱的@Tanaike，我很抱歉

function getAvailableTags() {

  var ss = SpreadsheetApp.openById("0Avt7ejriwlxudGZfV2xJUGJZLXktm2RhQU1uRUgtaXc");
  var s = ss.getSheetByName("Options");
  var data = s.getDataRange().getValues();
  var headers = 1; // number of header rows to skip at top
  var tagColumn = 0; // column # (0-based) containing tag

  var availableTags = [];
  for (var row=headers; row < data.length; row++) {
  var value = data[row][tagColumn];
  var url = data[row][tagColumn + 1];  // In this modification, it supposes that URLs are put in the column "B".
  availableTags.push({id: value, value: value, label: value, img: url});
}

  return( availableTags );
}

function getAvailableTags() {
  const contacts = People.People.Connections.list("people/me", {personFields: "names,photos", pageSize: 1000}).connections;
  const res = contacts.reduce((ar, c) => {
    if (c.hasOwnProperty("names") && c.hasOwnProperty("photos")) {
      const name = c.names[0].displayName;
      const img = c.photos.filter(p => p.default)[0];
      ar.push({id: name, value: name, label: name, img: img.url});
    }
    return ar;
  }, []);
  return res;
}

function getAvailableTags() {
  const contacts = People.People.Connections.list("people/me", {personFields: "names,photos,emailAddresses,phoneNumbers", pageSize: 1000}).connections;
  const res = contacts.reduce((ar, c) => {
    if (c.hasOwnProperty("names") && c.hasOwnProperty("photos")) {
      const name = c.names[0].displayName;
      const img = c.photos.filter(p => p.default)[0];
      let value = name;
      if (c.hasOwnProperty("emailAddresses")) value += "<br>" + c.emailAddresses[0].value;
      if (c.hasOwnProperty("phoneNumbers")) value += "<br>" + c.phoneNumbers[0].value;
      ar.push({id: name, value: value, label: name, img: img.url});
    }
    return ar;
  }, []);
  return res;
}