前言
在前端开发中，输入框搜索功能是非常常见的需求。而 Google 的搜索功能独具特色，如果我们能够在我们的应用中使用到 Google 的搜索功能，那么相信用户体验一定会有很大的提升。
react-google-typeahead 是一个基于 React 的 Google 搜索框组件，它能够提供 Google 搜索功能并补全搜索内容。本篇文章将介绍如何安装和使用这个组件，并附上示例代码。
安装
在使用过程中，我们需要先安装 react-google-typeahead 包，在终端中输入以下命令进行安装：
npm install react-google-typeahead --save
使用
引入组件
在需要使用的页面中，我们需要引入 react-google-typeahead 组件：
import GooglePlacesAutocomplete from 'react-google-typeahead';
基础用法
接下来，我们就可以在页面的代码中引入组件，并使用基础用法：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ ------------------------ ---- -------------------------
----- --- ------- --------- -
-------- -
------ -
-----
-------------------------
---------- -------- -- ------------------- -
--
------
--
-
-
------ ------- ----这段代码意味着我们在页面中使用了一个 Google 搜索框。当我们选中了某个搜索结果时，会在控制台输出选中结果的信息。
高级用法
react-google-typeahead 根据使用方法的不同，提供了不同的组件类型。
GooglePlacesAutocomplete 组件
GooglePlacesAutocomplete 组件是使用 react-google-typeahead 的基础组件。它允许我们根据用户输入的值在 Google Maps Places API 中搜索地址，并返回匹配的地址列表。我们可以使用 onSelect 属性来监听用户选中的结果。其代码如下：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ ------------------------ ---- -------------------------
----- --- ------- --------- -
-------- -
------ -
-----
-------------------------
---------- -------- -- ------------------- -
-------- -------------- -
--
------
--
-
-
------ ------- ----由于 Google Maps Places API 是需要 API key 的，我们需要在组件中加入 apiKey 属性，它的值为你的 Google Maps API key。在该组件内部，你可以使用 props 属性来配置你想要的搜索选项。
GooglePlacesAutocompleteIncludedResults 组件
如果我们想要过滤掉一些搜索结果，我们可以使用 GooglePlacesAutocompleteIncludedResults 组件。它允许我们指定一个数组，数组中的元素是一个搜索地址对象。在使用这种方法时，我们可以指定数组中包含的地址对象，而过滤掉其他的地址。其代码如下：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ -
-------------------------
----------------------------------------
- ---- -------------------------
----- ---------------- - -
- ------------ -------- --- --
- ------------ ------- ------- --
--
----- --- ------- --------- -
-------- -
------ -
-----
----------------------------------------
----------------- ---------------- -
-
- ------- -- -
-------------------------
- -------- -
--
--
------------------------------------------
------
--
-
-
------ ------- ----在这个示例代码中，我们给 GooglePlacesAutocompleteIncludedResults 传递了一个 includedResults 属性，它包含了我们想要搜索的地址。在此基础上，我们使用了一个 render prop pattern 中的 children 函数，实现了 GooglePlacesAutocomplete 组件的渲染。
GooglePlacesAutocompleteExcludedResults 组件
GooglePlacesAutocompleteExcludedResults 组件和 GooglePlacesAutocompleteIncludedResults 组件类似，不同之处在于，它允许我们指定一个数组，数组中的元素是一个搜索地址对象，而在搜索结果中排除这些地址。其代码如下：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ -
-------------------------
----------------------------------------
- ---- -------------------------
----- ---------------- - -
- ------------ -------- --- --
- ------------ ------- ------- --
--
----- --- ------- --------- -
-------- -
------ -
-----
----------------------------------------
----------------- ---------------- -
-
- ------- -- -
-------------------------
- -------- -
--
--
------------------------------------------
------
--
-
-
------ ------- ----需要注意的是，GooglePlacesAutocomplete、GooglePlacesAutocompleteIncludedResults 和 GooglePlacesAutocompleteExcludedResults 的输入属性参数相同，它们都接受同样的参数。
总结
通过本文的介绍，我们学习了如何使用 react-google-typeahead 包来实现 Google 搜索框。我们深入研究了这个包的不同组件类型，包括 GooglePlacesAutocomplete、GooglePlacesAutocompleteIncludedResults 和 GooglePlacesAutocompleteExcludedResults。同时，我们也使用示例代码展示了这个包的基础用法和高级用法，相信这些知识对读者有一定的学习和指导意义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600556a081e8991b448d36a8