使用 Node JS 完成地理补全答案

【问题标题】：Geocomplete with Node JS使用 Node JS 完成地理补全
【发布时间】：2016-05-19 19:18:15
【问题描述】：

我想在我的 Node JS 应用中使用 Geocomplete (Github example)，一个 JQuery 插件。我对网络应用程序相当陌生，并且无法弄清楚如何集成 JQuery 的东西。

我正在渲染我的页面：

render() {
  let { input } = this.state;

  return (
    <div className="row">
      <div className="col s12">
        <h4>Welcome!</h4>
        <input
          id="geocomplete"
          placeholder="Enter a search location”
          type="text"
          onChange={this.onInputChange.bind(this)}
          value={input} />
        <a
          onClick={this.onSearchClick.bind(this)}
          className='waves-effect waves-light btn'>Search!</a>
      </div>
    </div>
  )
}

该示例显示执行以下操作：

$("#geocomplete").geocomplete()

但我似乎无法在 render() 中执行此操作，所以我不确定如何操作。有什么想法吗？

谢谢！

【问题讨论】：

标签： javascript jquery node.js geocomplete

【解决方案1】：

您对在浏览器中运行的客户端 JavaScript 和在 Node.js 中运行的服务器端 JavaScript 感到困惑。

Geocomplete 是一个客户端库。因此，您需要在呈现的 HTML 中的 <script> 标记中引用它；例如：

render() {
  let { input } = this.state;

  return (
    <div className="row">
      <div className="col s12">
        <h4>Welcome!</h4>
        <input
          id="geocomplete"
          placeholder="Enter a search location”
          type="text"
          onChange={this.onInputChange.bind(this)}
          value={input} />
        <a
          onClick={this.onSearchClick.bind(this)}
          className="waves-effect waves-light btn">Search!</a>
      </div>
    </div>
    <script src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>
    <script src="/some/path/that/serves/jquery.geocomplete.js"></script>
  )
}

然后您可以在客户端脚本中使用它（您几乎可以肯定最终也会包含<script> 标记）。

作为旁注，render() 函数应该是纯 JS，还是某种神秘的模板语言？如果是模板语言，你应该提到是哪一种（因为它看起来像 JS，会让人感到困惑）。但如果它应该是纯 JS，你就有一些非常严重的语法问题。

【讨论】：

在 UI 上使用 React，所以不要太疯狂的语法问题：p