CODEWITHSUNDEEP
javascriptjquerygoogle-apps-scriptgoogle-sheetsgoogle-contacts-api
Michael
Michael

Reputation: 61

Populate Jquery Autocomplete With Google Contacts

Is there any way to populate Jquery autocomplete list with Google Contacts? So far I've been using the following code which populates the autocomplete list with the values form a Google Spreadsheet to show username suggestions and user profile pictures but I would really like to use my Google Contact as a data source. How should I change the code to achieve that?

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

Upvotes: 0

Views: 289

Answers (1)

Tanaike
Tanaike

Reputation: 201428

I believe your goal as follows.

  • From the discussions in the comments, you want to retrieve the user name and user photo image using People API.
    • When the method of people.connections.list of People API is used, the official document says Provides a list of the authenticated user's contacts. In this case, you want to use this data.
  • You want to achieve this using Google Apps Script.

Sample script:

In this case, please modify getAvailableTags() as follows. Before you use this script, 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;
}

Note:

  • In this modification, pageSize uses 1000. When the number of your contacts is over 1000. Please tell me.

Reference:

Added:

About your 2nd question of 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.. I would like to answer as follows. In this case, please modify above sample script as follows.

Modified script:

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

Upvotes: 1

Related Questions