阿尔及利亚地方和铁路:自动填写表格 [英] Algolia Places and Rails: Autocomplete Form

问题描述

我有一个地址表格，我希望在用户输入地址后自动完成(对于我来说，这是从街道开始的，根据我的测试，这不是问题).这是我到目前为止所做的:

I have an address form, which I would like to autocomplete upon user typing in the address (in my case starting with the street, which is not an issue, as I tested). Here is what I did so far:

1. 已安装的宝石: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 || '';
     });
   })();
   

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

   I did install the node_modules: places.js with npm

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

   3.Went back to my view file (which is a part of the multistep form) and added the necessary ids to the form fields 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文件:

   I also added to my aplication.js file:

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

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

   And I do have a config file for AlgoliaSearch: algoliasearch.rb

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

   但是，在我的表单中，什么都没有改变.我希望它像此.

   In my form, however, nothing changed. I wish it to be like this.

   推荐答案

   我花了大约8个小时才发现问题所在.首先，我需要webpacker来管理我的背包.因此，将其添加到我的Rails应用程序中，然后进行安装

   It took me around 8 hours to find out the problem. First I needed webpacker to manage my packs. So added to my rails app and then installed it

   # Gemfile
   gem 'webpacker'
   
   #Install
   bundle install 
   rails webpacker:install
   

   这将创建一个新的app/javascript/packs -folder，在该文件夹中还可以找到一个(新的)application.js文件.稍后，我将导入我的函数.

   This creates a new app/javascript/packs -folder, where also a (new) application.js file can be found. There later I would import my function.

   但是首先我需要进入我的address.html.erb并获取实际的ID，该ID被隐藏了，我不得不检查浏览器中的元素.因此，此代码位应如下所示:

   But first I needed to go the my address.html.erb and get the actual id, which was hidden and I had to inspect element in the browser. So this code bit should be as follows:

   <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的定义.我删除了它们.

   So no definition of id's in the form. I deleted them.

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

   Next step create a file 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网站上的说明安装了该模块)中导入了place.js.

   Now actually the places.js can be imported from my node_modules (which I installed before, following the instruction on algolia website.).

   最后但并非最不重要的一点，如上所述，我回到了app/javascript/packs/application.js并导入了我的函数:

   Last but not least, as I mentioned above, I went back to app/javascript/packs/application.js and imported my function:

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

   所以现在这对我有效！地址专家也插入到我表格的右侧字段中.

   So now this works for me just fine! The address paerts are also inserted in the right fields of my form.

   这篇关于阿尔及利亚地方和铁路:自动填写表格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！