Geocomplete with Node JS

Question

I would like to use Geocomplete (Github example), a JQuery plugin, with my Node JS app. I am fairly new to web apps and am having trouble figuring out how to integrate JQuery stuff.

I am rendering my page like so:

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>
  )
}

The example shows to do something like:

$("#geocomplete").geocomplete()

but I can't seem to do that in render(), so I'm not sure how. Any ideas?

Thanks!

Answer 1

You're getting confused by client-side JavaScript that runs in the browser, and server-side JavaScript that runs in Node.js.

Geocomplete is a client-side library. So you need to reference it in a <script> tag in your rendered HTML; for example:

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>
  )
}

Then you can use it in a client-side script (which you'll almost certainly also end up including with a <script> tag).

As a side note, is that render() function supposed to be pure JS, or is it some arcane templating language? If it's a templating language, you should mention which one (because it looks vaguely like JS and people will be confused). But if it's supposed to be pure JS, you have some really serious syntax problems.