Algolia Places and Rails:自动完成表单 [英] Algolia Places and Rails: Autocomplete Form

查看：45
本文介绍了Algolia Places and Rails:自动完成表单的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个地址表，我想在用户输入地址时自动完成它(在我的情况下，从街道开始，这不是问题，我测试过).这是我到目前为止所做的:

  1. 已安装的 gems:algoliasearch-rails 和 algolia-places-rails
  2. 创建了一个自动完成文件:app/assets/javascripts/autocomplete.js 并按照描述编写代码 这里

->

从'places.js'导入地点；(功能() {var PlacesAutocomplete = 地点({appId: 'xxx',apiKey: 'xxx',容器:document.querySelector('#form-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:places.js 和 npm

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

<p class="notification">请最后确定您的个人信息.</p><div id="myModal" class="modal" ><div class="modal-content"><div class="modal-body"><button type="button" class="btn btn-secondarydismiss-close" data-dismiss="modal">Close</button>

<div class="center-items-register-second"><%= form_for(@user, url: Wizard_path, remote: true) 做 |f|％＞<%= 渲染设计/共享/错误消息"%><div class="row second 1"><div 类=列"><div class="字段向导"><%= f.label :street, class: 'required' %><br/><%= f.text_field :street, id: 'form-address', class: 'form-control' %>

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

<div class="row second 2"><div 类=列"><div class="字段向导"><%= f.label :city, class: 'required' %><br/><%= f.text_field :city, id: 'form-city', class: 'form-control' %>

<div 类=列"><div class="字段向导邮政编码"><%= f.label :zip_code, class: 'required' %><br/><%= f.text_field :zip_code, id: 'form-zip', class: 'form-control' %>

<div class="row btns second 3"><div class="column btns"><%= f.submit "Register", class: 'btn form margin second'%>

<%结束%><div class="column btns"><%= link_to "Quit", @user, method: :delete, data: { confirm: "你的数据不会被保存！你确定要退出注册过程吗?", title: " " }, class: 'btn form margin second' %>

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

//= 需要 algolia-places-rails/places.min

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

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

然而，以我的形式，没有任何改变.我希望它像这个.

解决方案

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

# Gemfilegem 'webpacker'#安装捆绑安装rails webpacker:安装

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

但首先我需要去我的 address.html.erb 并获取实际的 id，这是隐藏的，我必须在浏览器中检查元素.所以这个代码位应该是这样的:

<div 类=列"><div class="字段向导"><%= f.label :street, class: 'required' %><br/><%= f.text_field :street, class: 'form-control' %>
<div 类=列"><div class="field housenumber"><%= f.label :house_number, class: 'required' %><br/><%= f.text_field :house_number, class: 'form-control' %>
<div class="row second 2"><div 类=列"><div class="字段向导"><%= f.label :city, class: 'required' %><br/><%= f.text_field :city, class: 'form-control' %>
<div 类=列"><div class="字段向导邮政编码"><%= f.label :zip_code, class: 'required' %><br/><%= f.text_field :zip_code, class: 'form-control' %>

所以表单中没有定义 id.我删除了它们.

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

从'places.js'导入地点；const initAutocomplete = () =>{var PlacesAutocomplete = 地点({容器:document.getElementById('user_street'),模板:{价值:功能(建议){返回建议.名称；}}}).配置({类型:'地址'});PlacesAutocomplete.on('change', function resultSelected(e) {document.getElementById('user_city').value = e.suggestion.city ||'';document.getElementById('user_zip_code').value = e.suggestion.postcode ||'';});};出口{ initAutocomplete };

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

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

import { initAutocomplete } from './autocomplete';初始化自动完成()；

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

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. Installed gems: algoliasearch-rails and algolia-places-rails
  2. Created an autocomplete file: app/assets/javascripts/autocomplete.js and wrote code as described here

->

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 || '';
  });
})();

I did install the node_modules: places.js with npm

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>

I also added to my aplication.js file:

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

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.

解决方案

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

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.

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>

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

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

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

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.

这篇关于Algolia Places and Rails:自动完成表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆