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

Question

有没有办法用 Google 联系人填充 Jquery 自动完成列表？ 到目前为止，我一直在使用以下代码 使用 Google 电子表格 中的值填充自动完成列表以显示用户名建议和用户个人资料图片，但 我真的很想使用我的 Google 联系方式一个数据源。我应该如何更改代码才能实现？

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>

getAvailableTags()

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 );
}

Answer 1

我相信你的目标如下。

根据评论中的讨论，您想使用 People API 检索用户名和用户照片图像。
- 当使用人API的people.connections.list方法时，官方文档说Provides a list of the authenticated user's contacts。在这种情况下，您想使用此数据。
您想使用 Google Apps 脚本实现此目的。

示例脚本：

这种情况下，请修改getAvailableTags()如下。在使用此脚本之前，please enable People API at Advanced Google services.

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;
}

注：

在此修改中，pageSize 使用 1000。当您的联系人数量超过 1000 时，请告诉我。

参考：

Method: people.connections.list

已添加：

关于 Could I please also ask you to show me how to pull another values from my Contacts? For instance If I decide to also include email and phone number, how should I do so? I would like it to look something like this - picture on the left and the name, email, phone number each in new line. 的第二个问题。我想回答如下。在这种情况下，请修改上面的示例脚本如下。

修改后的脚本：

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;
}

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

Populate Jquery Autocomplete With Google Contacts

javascript

jquery

google-sheets

google-contacts-api

google-apps-script

示例脚本：

注：

参考：

已添加：

修改后的脚本：