WordPress 字段
最近，我们的一位用户询问我们如何在 WordPress 表单中添加地址字段的自动完成功能。自动完成功能允许用户在键入时从实时生成的建议中快速选择地址。在本文中，我们将向您展示如何使用 Google Places API 在 WordPress 中添加地址字段的自动完成功能。
最近，我们的一位用户询问我们如何向 WordPress 表单中的地址字段添加自动填充功能。自动完成功能允许用户在键入时从实时生成的建议中快速选择地址。在本文中，我们将向您展示如何使用 Google Places API 将自动填充功能添加到 WordPress 中的地址字段。
影片教学 （Video Tutorial）
如果您不喜欢该视频或需要更多说明，请继续阅读。
如果您不喜欢该视频或需要更多说明，请继续阅读。
First thing you need to do is install and activate the 使用 Google Place API 自动完成地址 plugin. For more details, see our step by step guide on 如何安装 WordPress 插件.
您需要做的第一件事是使用 Google Place API插件安装并激活“ 地址自动完成” 。 有关更多详细信息，请参阅有关如何安装 WordPress 插件步指南。
Upon activation, you need to visit 设置 » 谷歌自动完成 page to configure plugin settings.
激活后，您需要访问设置 » 谷歌自动完成页面以配置插件设置。
系统会要求您输入 Google Places API 密钥。此 API 密钥允许您的网站与 Google 地图连接并从其数据库实时检索自动完成建议。
系统会要求您输入 Google Places API 密钥。使用此 API 密钥，您的网站可以与 Google 地图连接，并从其数据库中实时检索自动完成建议。
Head over to 谷歌开发者控制台 website and create a new project.
前往谷歌开发者控制台网站并创建一个新项目。
将出现一个弹出窗口，要求您提供项目的名称。使用一个有助于您稍后识别该项目的名称，然后单击“创建”按钮。
将出现一个弹出窗口，要求您提供项目的名称。使用有助于您稍后识别项目的名称，然后单击“创建”按钮。
弹出窗口将消失，等待几秒钟，您将自动重定向到新项目。
弹出窗口将消失，等待几秒钟，您将自动重定向到新项目。
现在您将看到可以为您的项目启用的流行 Google API 的列表。您需要找到并点击“Google Places API Web Service”。
现在，您将看到可以为您的项目启用的流行 Google API 的列表。您需要找到并点击“Google Places API Web Service”。
这将带您进入概述页面，解释此 API 的工作原理。您需要单击“启用”链接才能继续。
这将带您进入概述页面，解释 API 的工作原理。您需要单击“启用”链接才能继续。
开发者控制台现在将为您的项目启用 Google Places API。
开发者控制台现在将为您的项目启用 Google Places API。
但是，您仍然需要凭据才能在网站上使用 API。因此，请继续并单击“创建凭据”按钮继续。
但是，您仍然需要凭据才能在网站上使用 API。因此，继续并单击“创建凭据”按钮继续。
在下一个屏幕上，您需要单击“我需要什么凭据？”按钮。
在下一个屏幕上，您需要单击“我需要什么凭据？”按钮。
开发者控制台现在将向您显示 API 密钥。您需要复制此密钥并将其粘贴到 WordPress 网站上的插件设置下。
开发者控制台现在将向您显示 API 密钥。您需要复制此密钥并将其粘贴到 WordPress 网站的插件设置下。
您仍然需要在 Google Developers 项目上启用另一个 API。单击 Google 开发者控制台中的库，然后单击“Google Maps JavaScript API”。
您仍然需要在 Google Developers 项目上启用其他 API。单击 Google 开发者控制台中的“库”，然后单击“Google Maps JavaScript API”。
这将带您进入 API 的概述页面，您需要单击“启用”链接才能继续。
这将带您进入 API 的概述页面，您需要在其中单击“启用”链接才能继续。
此 API 不需要额外的 API 密钥，因此您现在就可以开始使用了。
该 API 不需要额外的 API 密钥，因此您现在就可以使用它。
在WordPress表单字段中启用自动填充地址 （Enabling Autocomplete Address in WordPress Form Fields）
You can add autocomplete address feature to any form field created by any WordPress 表单生成器插件.
您可以将自动完成地址功能添加到任何WordPress 表单生成器插件创建的任何表单字段中。
We will be using WP表格 in this tutorial. However, these instructions will work no matter what contact form plugin you are using.
在本教程中，我们将使用WP表格 。 但是，无论您使用哪种联系表格插件，这些说明都将起作用。
首先，您需要创建一个具有一个地址字段或一组地址字段的表单。
首先，您需要创建一个包含一个地址字段或一组地址字段的表单。
完成后，请像平常一样将此表单添加到您的网站。
完成后，请像平常一样将此表单添加到您的网站。
接下来，转到您添加表单的帖子或页面。您需要右键单击地址字段并从浏览器菜单中选择“检查”。
接下来，转到您添加表单的帖子或页面。您需要右键单击地址字段并从浏览器菜单中选择“检查”。
您将看到地址字段的名称、ID 和 CSS 类值。
您将在地址字段中看到名称、ID 和 CSS 类值。
For example, in this screenshot our form’s name value is wpforms[fields][9][address1], ID value is wpforms-352-field_9, and css class is wpforms-field-address-address1.
例如，在此屏幕快照中，表单的名称值为wpforms[fields][9][address1] ，ID值为wpforms-352-field_9 ，而css类为wpforms-field-address-address1 。
您只需复制这些值之一并将其粘贴到插件设置页面中。
您只需复制这些值之一并将其粘贴到插件设置页面即可。
如果您想定位多个表单中的多个字段，那么您只需添加一个逗号并添加另一个值即可。
如果要在多个表单中指定多个字段，只需添加一个逗号并添加另一个值即可。
不要忘记单击“保存”按钮来存储您的更改。
不要忘记单击“保存”按钮来存储您的更改。
That’s all, you can now visit your form page and try entering an address. The form field will automatically start showing suggestions using Google places and 谷歌地图.
就是这样，您现在可以访问表单页面并尝试输入地址。 表单字段将自动开始使用Google地点和谷歌地图显示建议。
We hope this article helped you learn how to add autocomplete for address fields in WordPress. You may also want to see our list of 24个商业网站必备的WordPress插件.
我们希望本文能帮助您学习如何在WordPress中为地址字段添加自动填充功能。 您可能还希望查看我们的24列表， 这些列表商业网站必须有 WordPress 插件 。
If you liked this article, then please subscribe to our YouTube 频道 for WordPress video tutorials. You can also find us on 推特 and Facebook.
如果您喜欢这篇文章，请订阅我们的YouTube 频道 WordPress视频教程。 您也可以在推特和Facebook上找到我们。
翻译自: https://www.wpbeginner.com/plugins/how-to-add-autocomplete-for-address-fields-in-wordpress/
WordPress 字段