Google Apps 脚本中的 Twitter Bootstrap Typeahead 多个值答案

【问题标题】：Twitter Bootstrap Typeahead Multiple Values in Google Apps ScriptGoogle Apps 脚本中的 Twitter Bootstrap Typeahead 多个值
【发布时间】：2016-12-10 01:35:14
【问题描述】：

我正在尝试实施我在 Google Apps 脚本 (GAS) 中的 this post 中找到的解决方案。它在JSFiddle 中运行良好，但由于in GAS 不起作用，我缺少一些东西。这是我的两个文件，它们构成了解决方案的 Google Apps 脚本实现。你能帮帮我吗？

代码.gs

function setUpNewSidebar() {
  var ui = HtmlService.createTemplateFromFile('typeahead')
           .evaluate()
           .setTitle('Title')
           .setSandboxMode(HtmlService.SandboxMode.IFRAME);
         SpreadsheetApp.getUi().showSidebar(ui);
}

typeahead.html

<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap.min.css"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/js/bootstrap.min.js"></script>
</head>

<input type="text" class="typeahead" />
<script>
$(document).ready(function() {

!function(source) {
    function extractor(query) {
        var result = /([^,]+)$/.exec(query);
        if(result && result[1])
            return result[1].trim();
        return '';
    }

    $('.typeahead').typeahead({
        source: source,
        updater: function(item) {
            return this.$element.val().replace(/[^,]*$/,'')+item+',';
        },
        matcher: function (item) {
          var tquery = extractor(this.query);
          if(!tquery) return false;
          return ~item.toLowerCase().indexOf(tquery.toLowerCase())
        },
        highlighter: function (item) {

          var query = extractor(this.query).replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, '\\$&')
          return item.replace(new RegExp('(' + query + ')', 'ig'), function ($1, match) {
            return '<strong>' + match + '</strong>'
          })
        }
    });

}(["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Dakota","North Carolina","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"]);

});
</script>
</html>

【问题讨论】：

一些问题。 1) 所有内容必须通过 tls 链接。 2) css 与 javascript 的链接方式不同 3) 你从未包含过 jquery 4) 你从未包含过 jquery typeahead 插件。最好的办法是查看 typeahead github 页面并关闭他们的文档。
非常感谢！我已经坚持了好几个星期了。非常非常感谢斯宾塞！对于希望从 Spencer 的修复中受益的任何人，它位于以下链接的 html 文件中：docs.google.com/spreadsheets/d/…
没有问题。您应该将您的修复作为答案发布，然后选择它。这对将来的其他人有帮助。

标签： twitter-bootstrap google-apps-script typeahead

【解决方案1】：

非常感谢 Spencer 提供这个可行的解决方案！为了让它在 GAS 中工作，typeahead.html 文件应该更新为以下内容（head 标签中的重大变化，并且 Code.gs 文件保持不变）：

<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"></script>
</head>

<input type="text" class="typeahead" />
<script>
$(document).ready(function() {

!function(source) {
    function extractor(query) {
        var result = /([^,]+)$/.exec(query);
        if(result && result[1])
            return result[1].trim();
        return '';
    }

    $('.typeahead').typeahead({
        source: source,
        updater: function(item) {
            return this.$element.val().replace(/[^,]*$/,'')+item+',';
        },
        matcher: function (item) {
          var tquery = extractor(this.query);
          if(!tquery) return false;
          return ~item.toLowerCase().indexOf(tquery.toLowerCase())
        },
        highlighter: function (item) {

          var query = extractor(this.query).replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, '\\$&')
          return item.replace(new RegExp('(' + query + ')', 'ig'), function ($1, match) {
            return '<strong>' + match + '</strong>'
          })
        }
    });

}(["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Dakota","North Carolina","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"]);

});
</script>
</html>

【讨论】：