介绍
can-places-autocomplete 是一个基于 Google Places API 的自动完成插件。可以用于在输入框中提供实时的地址自动完成建议。这个插件是一个基于 CanJS 框架的组件，提供了许多可配置选项和回调函数，非常灵活。
安装
可以通过 NPM 进行安装 can-places-autocomplete 包:
--- ------- -----------------------
或者可以手动下载并引入 dist 目录下的 can-places-autocomplete.min.js 文件。
使用
可以像下面这样使用 can-places-autocomplete：
------ --------------- ---- --------------------------
-- ---------- ------ ------ --- - ---------- ---
-- ----------------------------------------------------------------------------------
----- -------------- - ---------------------------
----- ------ - ---------------------------------
-------------------------- ----------------------------------------------------------------------------------
----------------------------------
-- --------------- --- --------------
----- ------------ - --- ---------------------------------------------------- -
------------- ---------------
------ ------------
----------- -
----- ---
------- -
---- --------
---- ----------
--
--
---------------------- -
-------------------
--
---在这个例子中，我们首先手动加载了 Google Places API 的 JavaScript SDK，并传入了一个 Google Maps API key，以及所需要的 libraries。然后我们创建了一个 CanAutocomplete 实例，并将其挂载到了一个输入框上。我们还配置了一些选项，比如 types 和 mapOptions，在获取地址建议后执行了一个自定义的回调函数 onPlaceSelected。
注意：
- 在使用之前，请确保你已经获得了 Google Maps API Key，可以在这里申请：https://developers.google.com/maps/documentation/javascript/get-api-key
- 由于这个插件依赖于 Google Places API，所以在使用之前，需要先手动引入 Google Places API 的 JavaScript SDK。
- 为了保证代码的可读性，这里省略了一些基础的 CanJS 插件初始化和配置规则。
API
CanAutocomplete
构造函数
--- ------------------------ --------
创建一个 CanAutocomplete 实例，并将其挂载到指定的 DOM 元素上。
- element：要挂载的 DOM 元素。
- options：配置项。
选项
| 选项名 | 默认值 | 描述 |
|---|---|---|
| googleApiKey | '' | 必填。Google Maps API Key。 |
| types | [] | 非必填。要在自动完成建议中包括的地址类型（可以是字符串数组或字符串）。详见 https://developers.google.com/maps/documentation/javascript/places-autocomplete#add_autocomplete。 |
| bounds | null | 非必填。限制自动完成建议的搜索范围。 |
| mapOptions | {} | 非必填。一个可传递给 Google Maps API 的配置对象，详见 https://developers.google.com/maps/documentation/javascript/reference/map#MapOptions。 |
| locationSelect | false | 非必填。为 true 时，在使用用户选中建议一次发起查询时，请求的位置参数为用户选择的地址，而不是当前搜索框的位置。 |
| onInput | null | 非必填。当输入框的数值发生变化时调用的函数，默认情况下，输入的值被用作查询建议的关键字，可以在这个函数的回调中对输入的值进行处理或者通过返回 false 阻止自动完成建议的出现。函数被传递了输入框 DOM 元素和输入框当前的值。 |
| onPlaceChanged | null | 非必填。当用户选择一个地址时调用的回调函数。函数被传递了一个对象，包含了有关所选地址的信息，详见 https://developers.google.com/maps/documentation/javascript/reference/places-service#PlaceResult。这个回调函数会在构造函数中传递给 PlacesService 的 onPlaceChanged、或者 AutocompleteService 的 onPlaceChanged（在 locationSelect 为 true 时）。 |
| onError | null | 非必填。当在请求建议或者领地信息时出现错误时，调用的函数。函数被传递了一个 Error 对象。 |
方法
| 方法名 | 描述 |
|---|---|
| destroy | 从 DOM 中移除自动完成输入框和相关的对象和事件处理程序。这个函数中所有内部事件处理程序对当前实例的引用都会被删除。如果需要再次使用实例，需要重新创建。 |
| reset | 重新将输入框设为初始状态，并清除选择建议的选项。如果开启了 locationSelect 选项，还会将该选项关闭，并且假定用户从未选择过建议。此时如果调用 getPlace 方法会返回 null。 |
| getPlace | 获得当前从 PlacesService 或 AutocompleteService 返回的 selectedPlace。可以在 onPlaceChanged 回调函数中调用。返回一个 PlaceResult 对象，该对象包含了有关该地点的多个信息部分，详见：https://developers.google.com/maps/documentation/javascript/reference/places-service#PlaceResult。 |
事件
| 事件名 | 描述 |
|---|---|
| focus | 当输入框获得焦点时触发。 |
| blur | 当输入框失去焦点时触发。 |
| places_changed | 当 PlacesService 或 AutocompleteService 返回新建议列表时触发。返回一个包含当前自动完成文本框下的所有建议的 PlaceResult 对象数组。 |
| status_changed | 当请求 PlacesService 或 AutocompleteService 的状态发生更改时触发。 |
| load_script_fail | 当自动加载 Google Maps API 失败时触发。 |
例子
------ --------------- ---- --------------------------
----- -------------- - ---------------------------
-- -- ------ ---- --- - ---------- ---
----- ------ - ---------------------------------
-------------------------- ----------------------------------------------------------------------------------
----------------------------------
----- ------------ - --- ---------------------------------------------------- -
------------- ---------------
-------------- ------ -
-- ------------- - -- -
------ ------ -- ------
-
------ ------
--
--------------------- -
-------------------
--
---结论
can-places-autocomplete 是一个非常灵活的 JavaScript 自动完成输入框组件，可以很容易的集成到你的项目中。通过一些简单的配置，你可以随心所欲的控制输入框的搜索参数和搜索建议的类型。同时，can-places-autocomplete 还提供了丰富的回调函数和事件响应机制，可以满足不同应用场景下的各种需求，并且在整个使用过程中非常易于使用和调试。
参考
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600573a081e8991b448e99aa