javascript - 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 );
}
解决方案
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.
- When the method of people.connections.list of People API is used, the official document says
- 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
uses1000
. 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;
}
推荐阅读
- powerbi - Power BI - 自定义主题中的字体大小不一致
- python - 在python BS4中提取某些文本?
- mysql - 如何在两台或多台电脑上连接应用程序桌面和mysql数据库
- python - 在 Python 中检测和录制音频 - 修剪开始的静音
- jquery - JQuery 多个选择器 :first 和 :contains text()
- java - Maven - 由于 NoClassDefFoundError 无法运行 .jar 文件
- php - 如果等于一个字符串,如何检查多个GET?
- java - 远程服务器对 Spring Boot Controller 的响应
- scala - 使用依赖类型扩展
- python - 在 Python 列表中对一组相似的数字进行分组