Twitter Bootstrap Typeahead Несколько значений в скрипте Google Apps

Я пытаюсь реализовать решение, которое я нашел в этом сообщении в скрипте Google Apps ( ГАЗ). Он прекрасно работает в JSFiddle, но я упускаю кое-что, из-за чего это не работает в GAS. Вот мои два файла, которые содержат реализацию решения Google Apps Script. Не могли бы вы мне помочь?

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

google-apps-script twitter-bootstrap typeahead
person Bryton Beesley    schedule 04.12.2016    source источник
comment
Несколько вопросов. 1) Весь контент должен быть связан через tls. 2) css не связан так же, как javascript 3) вы никогда не включали jquery 4) вы никогда не включали плагин jquery typeahead. Лучше всего заглянуть на страницу typeahead на github и отказаться от их документации.   -  person Spencer Easton    schedule 05.12.2016
comment
Большое спасибо! Я застрял на этом в течение нескольких недель. Большое, большое спасибо тебе, Спенсер! Для тех, кто хочет воспользоваться исправлением Спенсера, оно находится в html-файле по этой ссылке: docs.google.com/spreadsheets/d/   -  person Bryton Beesley    schedule 07.12.2016
comment
Нет проблем. Вы должны опубликовать свое исправление в качестве ответа, а затем выбрать его. Это поможет другим в будущем.   -  person Spencer Easton    schedule 07.12.2016

Ответы (1)


arrow_upward
0
arrow_downward

Большое спасибо 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>
person Bryton Beesley    schedule 09.12.2016