Question

我在表单中有一个输入字段，我希望包含自动填充功能，以显示用户Google Contacts目录中的所有联系人。

理想的解决方案是使用Google Contacts API（但是，我无法实现这一点）。

尽管如此，我目前使用jQuery自动完成功能与NATIVE沙箱中的ContactsApp类一起使用。

我的问题是：

为什么它在IFRAME中不起作用？我有其他代码停止在NATIVE中工作，所以在IFRAME中确实需要一个解决方案。
如果在IFRAME中无法使用，您是否有使用Contacts API的经验？

以下是我的代码：

Google脚本

function showSidebar() {
  var ui = HtmlService.createHtmlOutputFromFile('Sidebar1')
      .setSandboxMode(HtmlService.SandboxMode.NATIVE)
  FormApp.getUi().showSidebar(ui);
}

function getAvailableTags() {
var contacts = ContactsApp.getContacts();
var list = [];
for(var i = 0; i < contacts.length; i++){
  var emails = contacts[i].getEmails();
if(emails[0] != undefined){
  list.push(emails[0].getAddress());
}
}

return( list );
}

Html文件

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

<input type="text" class="width-100" id="user-input1" autocomplete="on">

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<script>
$(function() {
  google.script.run.withSuccessHandler(buildTagList)
      .getAvailableTags();
});

function buildTagList(list) {
$( "#user-input1" ).autocomplete({
    source: function(request, response) {
        var results = $.ui.autocomplete.filter(list, request.term);

        response(results.slice(0, 10));
    },
    minLength: 2,
    autoFocus: true,
    delay: 500


  });
}
</script>

Answer 1

在审查了@Zig Mandel提供的HtmlService限制here之后，我意识到包含的库不是来自安全页面。因此找到了解决问题的Google hosted libraries（这是https）。

Google脚本

function showSidebar() {
  var ui = HtmlService.createHtmlOutputFromFile('Sidebar1')
      .setSandboxMode(HtmlService.SandboxMode.NATIVE)
  FormApp.getUi().showSidebar(ui);
}

function getAvailableTags() {
var contacts = ContactsApp.getContacts();
var list = [];
for(var i = 0; i < contacts.length; i++){
  var emails = contacts[i].getEmails();
if(emails[0] != undefined){
  list.push(emails[0].getAddress());
}
}

return( list );
}

Html文件

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"> **<--- this is originally incorrect--->**

<input type="text" class="width-100" id="user-input1" autocomplete="on">

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> **<-- this was also originally incorrect-->**

<script>
$(function() {
  google.script.run.withSuccessHandler(buildTagList)
      .getAvailableTags();
});

function buildTagList(list) {
$( "#user-input1" ).autocomplete({
    source: function(request, response) {
        var results = $.ui.autocomplete.filter(list, request.term);

        response(results.slice(0, 10));
    },
    minLength: 2,
    autoFocus: true,
    delay: 500


  });
}
</script>

使用Google Apps脚本中的IFRAME沙箱进行jquery自动填充

1 个答案: