使用Google Spreadsheet中的值数组填充jQuery自动完成列表 [英] Populate jQuery autocomplete list using value array from Google Spreadsheet

问题描述

我正尝试使用以下此处 HTML服务文本框中的自动完成功能。

我成功地做到了这一点，但我想要更改可用的标签。这些标签应该来自电子表格。我已经尝试了以下......任何帮助。

 < script> 
 var ss = SpreadsheetApp.openById（0Avt7ejriwlxudGZfV2xJUGJZLXktm2RhQU1uRUgtaXc）; 
 var s = ss.getSheetByName（Database）; 
 var lastrow = s.getLastRow（）; 
 var list = s.getRange（2,3，lastrow）.getValues（）; 
 for（var i = 0; i< list.length; i ++）{
 
} 
 
 $（function（）{
 var availableTags = [list [i] [0]]; 
 $（#tags）.autocomplete（{
 source：availableTags 
}）; 
}）; 
< / script> 
  

任何帮助我如何修改代码以正确链接availableTags。

解决方案

将UI HTML与将填充列表的Apps Script代码分开是一个好主意。因此，首先，我们将如何分离这些位，使用Apps脚本函数返回 availableTags 列表。 （从以前的回答改为类似的问题。）

作为一个Web应用程序发布，这将产生一个附带自动完成功能的输入框，其中可用标记已从应用程序脚本函数中提供。我们在页面加载时调用该函数，如下所示：

  google.script.run.withSuccessHandler（buildTagList）
 .getAvailableTags（）; 
  

Code.gs

 函数doGet（）{
 var template = HtmlService 
 .createTemplateFromFile（'Autocomplete'）; 
 
 var htmlOutput = template.evaluate（）
 .setSandboxMode（HtmlService.SandboxMode.NATIVE）
 .setTitle（'jQuery UI Autocomplete  -  Default functionality'）; 
 
返回htmlOutput; 
} 
 
函数getAvailableTags（）{
 //在生产代码中，通过
 //读取电子表格来获取一个选项数组。 
a，
BASIC，
C，
AppleScript，
 $ bC ++，
Clojure，
COBOL，
ColdFusion，
Erlang，
Fortran，
 Groovy，
Haskell，
Java，
JavaScript，
Lisp，
Perl，
PHP ，
Python，
Ruby，
Scala，
Scheme]; 
 
 return（availableTags）; 
 
  

Autocomplete.html

 < link rel =stylesheethref =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>标记：< / label> 
< input id =tags/> 
< / div> 
 
< script> 
 //这个函数中的代码在页面加载时运行。 
 $（function（）{
 google.script.run.withSuccessHandler（buildTagList）
 .getAvailableTags（）; 
}）; 
 
函数buildTagList（availableTags）{
 $（#tags）.autocomplete（{
 source：availableTags 
}）; 
} 
< / script> 
  

getAvailableTags（）

如上所述，您可以继续填充电子表格中的 availableTags 列表，替换我们开始使用的固定数组。就像这样：

pre $函数getAvailableTags（）{

var ss = SpreadsheetApp.openById（0Avt7ejriwlxudGZfV2xJUGJZLXktm2RhQU1uRUgtaXc ）;
var s = ss.getSheetByName（Database）;
var data = s.getDataRange（）。getValues（）;
var headers = 1; //在顶部跳过的标题行数
var tagColumn = 2; //包含标记

的列＃（从0开始）var availableTags = [];
for（var row = headers; row< data.length; row ++）{
availableTags.push（data [row] [tagColumn]）;
}

return（availableTags）;
}

I am trying to use the following here autocomplete feature in an HTML service textbox.

I am successfully able to do so, but I want to change the available tags. The tags should be from a spreadsheet. I have tried the following..any help please.

<script>
var ss = SpreadsheetApp.openById("0Avt7ejriwlxudGZfV2xJUGJZLXktm2RhQU1uRUgtaXc");
   var s = ss.getSheetByName("Database");
   var lastrow = s.getLastRow();
   var list = s.getRange(2,3, lastrow).getValues();
   for( var i = 0; i < list.length; i++)  {

  }

    $(function() {
    var availableTags = [list[i][0]];
    $( "#tags" ).autocomplete({
    source: availableTags
    });
    });
</script>

Any help how can I modify the code to link the availableTags properly.

解决方案

It's a Good Idea to separate the UI HTML from the Apps Script code that will populate your list. So first, here's how to separate those bits, with the availableTags list getting returned from an Apps Script function. (Adapted from a previous answer to a similar question.)

Published as a web app, this will yield an input box with the autocomplete function attached, where the available tags have been provided from an apps script function. We call that function when the page loads, like this:

      google.script.run.withSuccessHandler(buildTagList)
                       .getAvailableTags();

Code.gs

function doGet() {
  var template = HtmlService
                 .createTemplateFromFile('Autocomplete');

  var htmlOutput = template.evaluate()
                   .setSandboxMode(HtmlService.SandboxMode.NATIVE)
                   .setTitle('jQuery UI Autocomplete - Default functionality');

  return htmlOutput;
}

function getAvailableTags() {
  // In production code, get an array of options by
  // reading a spreadsheet.
  var availableTags = [
    "ActionScript",
    "AppleScript",
    "Asp",
    "BASIC",
    "C",
    "C++",
    "Clojure",
    "COBOL",
    "ColdFusion",
    "Erlang",
    "Fortran",
    "Groovy",
    "Haskell",
    "Java",
    "JavaScript",
    "Lisp",
    "Perl",
    "PHP",
    "Python",
    "Ruby",
    "Scala",
    "Scheme"];

  return( availableTags );
}

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

getAvailableTags()

With the framework working as above, you can move on to populating the availableTags list from your spreadsheet, replacing the fixed array we've started with. Something like this:

function getAvailableTags() {

  var ss = SpreadsheetApp.openById("0Avt7ejriwlxudGZfV2xJUGJZLXktm2RhQU1uRUgtaXc");
  var s = ss.getSheetByName("Database");
  var data = s.getDataRange().getValues();
  var headers = 1; // number of header rows to skip at top
  var tagColumn = 2; // column # (0-based) containing tag

  var availableTags = [];
  for (var row=headers; row < data.length; row++) {
    availableTags.push(data[row][tagColumn]);
  }

  return( availableTags );
}

这篇关于使用Google Spreadsheet中的值数组填充jQuery自动完成列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！