使用Google通讯录填充Jquery自动完成功能 示例脚本：注意：参考：修改后的脚本：

问题描述

是否可以使用Google联系人填充Jquery自动填充列表？到目前为止，我一直在使用以下代码使用Google Spreadsheet中的值填充自动填充列表显示用户名建议和用户个人资料图片，但我真的很想将我的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 );
}

解决方法

我相信您的目标如下。

• 从注释中的讨论中，您想使用People API检索用户名和用户照片图像。
  • 当使用People 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",photos,emailAddresses,phoneNumbers",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,[]);
  return res;
}