2015-07-13 2 views
0

У меня есть поле ввода внутри формы, в которое я хотел бы включить автозаполнение для отображения всех контактов в каталоге контактов Google для пользователей.jQuery autocomplete с песочницей IFRAME в скрипте Google Apps

Идеальное решение будет использовать API контактов Google (однако, я не смог этого достичь).

Тем не менее, в настоящее время у меня есть функция автозаполнения jquery, работающая с классом ContactsApp в изолированной песочнице.

Мои вопросы:

  1. Почему это не работает в IFRAME? У меня есть другой код, который перестает работать в NATIVE, поэтому действительно нужно решение в IFRAME.
  2. Если это невозможно в IFRAME, есть ли у вас опыт использования API контактов?

Вот мой код, дата:

Google Script

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 File

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

ответ

0

Ознакомившись с ограничениями Класс HtmlService here любезность @Zig ​​Mandel, Я понял, что библиотеки включены не с защищенной страницы. И поэтому нашли Google hosted libraries (https), которые решили проблему.

Google Script

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 File

<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> 
Смежные вопросы