时间戳

首页 > 解决方案 > Algolia Places and Rails：自动完成表格

javascript - Algolia Places and Rails：自动完成表格

问题描述

我有一个地址表格，我想在用户输入地址时自动完成（在我的情况下，从街道开始，这不是问题，正如我测试的那样）。这是我到目前为止所做的：

  1. 已安装的 gem：algoliasearch-rails 和 algolia-places-rails
  2. 创建了一个自动完成文件：app/assets/javascripts/autocomplete.js 并按照此处所述编写代码

->

import places from 'places.js';

(function() {
  var placesAutocomplete = places({
    appId: 'xxx',
    apiKey: 'xxx',
    container: document.querySelector('#form-address'),
    templates: {
      value: function(suggestion) {
        return suggestion.name;
      }
    }
  }).configure({
    type: 'address'
  });
  placesAutocomplete.on('change', function resultSelected(e) {
    document.querySelector('#form-city').value = e.suggestion.city || '';
    document.querySelector('#form-zip').value = e.suggestion.postcode || '';
  });
})();

我确实用 npm 安装了 node_modules:places.js

3.回到我的视图文件（这是多步骤表单的一部分）并将必要的ID添加到表单字段app/views/user_steps/address.html.erb

<div class="container">
    <p class="notification">Please finalise your personal information.</p>
        <div id="myModal" class="modal" >

                <div class="modal-content">
                    <div class="modal-body">     
                        <button type="button" class="btn btn-secondary dismiss-close" data-dismiss="modal">Close</button>
                    </div>
                </div>    

        </div>
    <div class="center-items-register-second">

    <%= form_for(@user, url: wizard_path, remote: true) do |f| %>
    <%= render "devise/shared/error_messages" %>


        <div class="row second 1">
            <div class="column">
              <div class="field wizard">
                <%= f.label :street, class: 'required' %><br />
                <%= f.text_field :street, id: 'form-address', class: 'form-control' %>
              </div>
            </div>

            <div class="column">
                <div class="field housenumber">
                    <%= f.label :house_number, class: 'required' %><br />
                    <%= f.text_field :house_number, class: 'form-control' %>
                </div>
            </div>
        </div>


        <div class="row second 2">
            <div class="column">
                <div class="field wizard">
                    <%= f.label :city, class: 'required' %><br />
                    <%= f.text_field :city, id: 'form-city', class: 'form-control' %>
                </div>
            </div>

            <div class="column">
                <div class="field wizard zipcode">
                    <%= f.label :zip_code, class: 'required' %><br />
                    <%= f.text_field :zip_code, id: 'form-zip', class: 'form-control' %>
                </div>
            </div>

        </div>


            <div class="row btns second 3">
                <div class="column btns">

                     <%= f.submit "Register", class: 'btn form margin second'%>

                </div>
                <% end %>
                <div class="column btns">
                    <%= link_to "Quit", @user, method: :delete, data: { confirm: "Your data won't be saved! Are you sure you want to quit registration process?", title: " " },  class: 'btn form margin second' %>
                </div>

            </div>

        </div>

    </div>
</div>

我还添加到我的 aplication.js 文件中：

//= require algolia-places-rails/places.min

我确实有一个 AlgoliaSearch 的配置文件：algoliasearch.rb

AlgoliaSearch.configuration = { application_id: 'xxx', api_key: 'xxx' }

然而，在我的形式中，没有任何改变。我希望它是这样的。

标签： javascriptruby-on-railsautocompletealgolia

解决方案

我花了大约 8 个小时才发现问题所在。首先我需要 webpacker 来管理我的包。所以添加到我的rails应用程序然后安装它

# Gemfile
gem 'webpacker'

#Install
bundle install 
rails webpacker:install

这将创建一个新的 app/javascript/packs 文件夹，其中还可以找到一个（新的）application.js 文件。稍后我会导入我的函数。

但首先我需要访问我的 address.html.erb 并获取隐藏的实际 id，我必须检查浏览器中的元素。所以这个代码位应该如下：

<div class="row second 1">
            <div class="column">
              <div class="field wizard">
                <%= f.label :street, class: 'required' %><br />
                <%= f.text_field :street, class: 'form-control' %>
              </div>
            </div>

            <div class="column">
                <div class="field housenumber">
                    <%= f.label :house_number, class: 'required' %><br />
                    <%= f.text_field :house_number, class: 'form-control' %>
                </div>
            </div>
        </div>


        <div class="row second 2">
            <div class="column">
                <div class="field wizard">
                    <%= f.label :city, class: 'required' %><br />
                    <%= f.text_field :city, class: 'form-control' %>
                </div>
            </div>

            <div class="column">
                <div class="field wizard zipcode">
                    <%= f.label :zip_code, class: 'required' %><br />
                    <%= f.text_field :zip_code, class: 'form-control' %>
                </div>
            </div>

        </div>

所以表格中没有id的定义。我删除了它们。

下一步创建文件 app/javascript/packs/autocomplete.js

import places from 'places.js';

const initAutocomplete = () => {
  var placesAutocomplete = places({
    container: document.getElementById('user_street'),
    templates: {
      value: function(suggestion) {
        return suggestion.name;
      }
    }
  }).configure({
    type: 'address'
  });

  placesAutocomplete.on('change', function resultSelected(e) {
    document.getElementById('user_city').value = e.suggestion.city || '';
    document.getElementById('user_zip_code').value = e.suggestion.postcode || '';
  });
};

export { initAutocomplete };

现在实际上可以从我的 node_modules （我之前安装的，按照 algolia 网站上的说明）导入places.js。

最后但同样重要的是，正如我上面提到的，我回到 app/javascript/packs/application.js 并导入了我的函数：

import { initAutocomplete } from './autocomplete';
initAutocomplete();

所以现在这对我来说很好！地址文件也插入到我表单的正确字段中。

推荐阅读