Go 和 Typeahead js 集成答案

【问题标题】：Go and Typeahead js integrationGo 和 Typeahead js 集成
【发布时间】：2015-01-03 06:54:03
【问题描述】：

我正在尝试将 typeahead.js 与我的 Go 程序集成。它似乎不起作用。到目前为止，这是我所拥有的：

目录结构：

/hello/
  public/
    js/
      countries.json
      form.js
      typeahead.min.js

  templates/
    form.html

  hello.go

countries.json：

["Andorra","United Arab Emirates","Afghanistan","Antigua and Barbuda","Anguilla"]

form.js

var countries = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    limit: 10,
    prefetch: {
       url: 'hello/public/js/countries.json',
       filter: function(list) {
       return $.map(list, function(country) { return { name: country }; });
       }
    }
});
countries.initialize();

$('#prefetch .typeahead').typeahead(null, {
   name: 'countries',
   displayKey: 'name',
   source: countries.ttAdapter()
});

typeahead.min.js：

来自http://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.min.js的内容

form.html

<html>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">

  <script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
  <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

  <script src="[absolute path to]/hello/public/js/form.js"></script>
  <script src="[absolute path to]/hello/public/js/typeahead.min.js"></script>
  <script type="text/javascript"></script>

  <body>            
    <form method="post" action="/join" id="loginForm">

        <div id="prefetch">
          <input class="typeahead" type="text" placeholder="Countries">
        </div>

        <button type="submit">Join</button>
    </form>
  </body>
</html>

hello.go 中的文件服务器：

http.Handle("/public/js/", http.StripPrefix("/public/js", http.FileServer(http.Dir(filepath.Join(cwd, "/github.com/hello/hello/公共/js")))))

控制台错误：

Uncaught SyntaxError: Unexpected token < typeahead.min.js:1 Uncaught SyntaxError: Unexpected token <

我参考过：

http://runnable.com/UlXgeluakNULAAAv/create-an-autocomplete-input-box-with-typeahead-js-for-jquery-and-javascript http://plugins.upbootstrap.com/bootstrap-ajax-typeahead/

我一直在尝试解决这个问题。我可以看到表单显示，似乎 bootstrap 和 jquery 正在从 CDN 导入，但没有下拉自动完成建议。

非常感谢您的帮助！！或者让我知道您是否需要更多信息。谢谢！

【问题讨论】：

你的网址不应该是/public/js/countries.json吗？您在开发者控制台中是否还有任何错误？
啊，是的，我已经用错误更新了帖子。
@lander 当我将 URL 更改为 /public/js/countries.json 我有这些额外的错误：资源解释为脚本但使用 MIME 类型 text/html 传输：“localhost:8080/[absolute path to] /hello/public/js/form.js”。 localhost/:11 资源解释为脚本，但使用 MIME 类型 text/html 传输：“localhost:8080/[absolute path to]/hello/public/js/typeahead.min.js”。
其实我写的都一样。

标签： jquery twitter-bootstrap go typeahead.js bootstrap-typeahead

【解决方案1】：

您在 typeahead.min.js:1 中遇到的关于“

您可能想检查您的路线。

你没有显示hello.go，所以这只是一个猜测，但我认为html中的路径应该是“/js/...”，而不是绝对路径。

【讨论】：

如果你使用类似 http.FileServer(http.Dir("public")) 的方式启动服务，那么 html 应该引用 "/js" ，而不是 "/public/js"。跨度>
我使用 http.FileServer(http.Dir("[absolute path to]/public/js")) 启动了服务。这会有所作为吗？
我将 http 标头设置为 Content-type: application/javascript 并解决了错误。但是我现在只看到网页上的html代码。
例如：golang.org/pkg/net/http/#example_FileServer 如果“public”文件夹有 index.html，它将在顶层提供。 HTML 在浏览器中呈现，除了公用文件夹之外，它无法访问任何其他位置。浏览器看到的只是文件夹，从“/”开始。所以你的“[ABSOLUTE_PATH]/project/public/js/script.js”应该是HTML文件中的“/js/script.js”。
好的，我已经将它们更改为 /js/script.js 但我仍然在页面上看到 HTML 代码。