Twitter引导程序Typeahead Google Apps脚本中的多个值

我试图在Google Apps脚本（GAS）中实现我在this post中找到的解决方案。它在JSFiddle中效果很好，但由于它不起作用，我缺少某些东西in GAS。以下是我的两个文件，其中包含解决方案的Google Apps脚本实施。你能帮我吗？Twitter引导程序Typeahead Google Apps脚本中的多个值

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>

来源

2016-12-04 Bryton Beesley

的几个问题。 1）所有内容必须通过tls链接。 2）CSS没有链接相同的JavaScript 3）你从来没有包括jquery 4）你从来没有包括jquery typeahead插件。你最好的选择是看看前面的github页面并关闭他们的文档。 –

非常感谢！我已经坚持了几个星期。很多，非常感谢你斯宾塞！对于希望从Spencer的修复中受益的用户，它位于以下链接的html文件中：https://docs.google.com/spreadsheets/d/1FCtN7GANjlndw6Ii7txLgvxASbHhHAgKWUFs0TyaBSg/edit?usp=sharing –

没有问题。你应该发布你的修复作为答案，然后选择它。这在未来有助于其他人。 –

非常感谢斯宾塞这个工作解决方案！为了得到这个气工作，typeahead.html文件应该被更新为以下（大的变化是在头标记，并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>

来源

2016-12-09 17:35:14

Twitter引导程序Typeahead Google Apps脚本中的多个值

回答

相关问题