Rails - jQuery Geocoding 和 Places 自动完成插件不起作用答案

【问题标题】：Rails - jQuery Geocoding and Places autocomplete plugin not workingRails - jQuery Geocoding 和 Places 自动完成插件不起作用
【发布时间】：2016-04-04 15:49:54
【问题描述】：

我正在尝试将上述插件用于我正在使用 Ruby On Rails 构建的事件应用程序，但我无法让它工作。该插件的目的是通过在创建/编辑新事件时自动完成位置地址来帮助用户。

这是我的 events.coffee 文件 -

jQuery ->

 $("#datepicker").datepicker(dateFormat: "DD, d MM, yy");

jQuery ->

$('geocomplete').geocomplete()

$.fn.geocomplete 'geocomplete'

应用程序.js

//= require jquery
//= require jquery.turbolinks
//= require jquery-ui/datepicker
//= require jquery_ujs
//= require turbolinks
//= require_tree .

我还下载了 jquery.geocomplete.js 和 jquery.geocomplete.min.js 并将它们添加到我的 javascript 文件夹中。

这是我的带有地理完整标识符的 _form.partial.html.erb -

<%= f.input :image, as: :file, label: 'Image' %>
<%= f.input :title, label: 'Title' %>
<%= f.text_field :location, id: 'geocomplete', label: 'Location' %>
<%= f.text_field :date, id: 'datepicker', label: 'Date' %>
<%= f.input :time, label: 'Time' %>
<%= f.input :description, label: 'Description' %>
<%= f.input :organised_by, label: 'Organised by' %>
<%= f.input :organiser_description, label: 'Organiser description' %>
<%= f.input :url, label: "Link to Organiser site" %>

<%= f.button :submit, label: 'Submit' %>

这是我的带有 google api 链接的 application.html.erb -

<!DOCTYPE html>
<html>
<head>
  <title>MamaKnows</title>
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-        track' => true %>
  <script src="http://maps.googleapis.com/maps/api/js?libraries=places">      </script>
  <script src="jquery.geocomplete.js"></script>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>
</head>
<body>
<header>

任何关于为什么这不起作用的帮助将不胜感激。

【问题讨论】：

标签： javascript jquery ruby-on-rails coffeescript

【解决方案1】：

我已经搞定了。

所需要的只是对 application.js 文件进行以下调整 -

//= require jquery
//= require jquery.turbolinks
//= require jquery-ui/datepicker
//= require jquery_ujs
//= require turbolinks
//= require_tree .
//= require jquery.geocomplete

$(function() {
$("#geocomplete").geocomplete();
});

【讨论】：