使用Google电子表格中的值数组填充jQuery自动完成列表

Populate jQuery autocomplete list using value array from Google Spreadsheet

本文关键字：jQuery 列表 填充 数组 电子表格 Google 使用      更新时间：2023-09-26

我正试图在HTML服务文本框中使用以下here自动完成功能。

我成功地做到了，但我想更改可用的标签。标签应该来自电子表格。我试过以下方法。。请帮忙。

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

任何帮助我如何修改代码以正确链接可用标签。

将UI HTML与将填充列表的应用程序脚本代码分离是个好主意。因此，首先，以下是如何分离这些位，从Apps Script函数返回availableTags列表。（改编自之前对类似问题的回答。）

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

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

代码.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 );
}

自动完成.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>

获取可用标记（）

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

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 );
}
相关文章：