简介
hodc-typeahead 是一个基于 React 的前端自动完成搜索框组件，可以方便地实现搜索框下拉提示和搜索结果展示功能。本篇文章将介绍如何使用 hodc-typeahead 进行搜索框开发。
安装
使用 npm 安装 hodc-typeahead：
npm install hodc-typeahead --save
使用示例
下面是一个最简单的 hodc-typeahead 使用示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------------- ---- -----------------
----- --------- ------- --------------- -
-------- -
------ -
-------------- ------------------ --------- ---------- --
--
-
-
------ ------- ----------这样就实现了一个包含三个选项的搜索框，当用户键入搜索关键字时，会在下拉菜单中展示相关选项。但是，我们可能需要更加复杂的搜索框，比如：
- 可以异步获取后端的搜索结果
- 可以展示搜索结果的图标
- 可以在搜索框中快速回显最近搜索的历史记录
- 可以根据用户输入的关键字对搜索结果进行排序
- 等等
进阶使用
异步获取搜索结果
hodc-typeahead 提供了 onSearch 回调函数，可以接收用户输入的关键字并返回异步获取的搜索结果。我们可以根据自己的后端接口调用方式编写后面的代码，比如：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------------- ---- -----------------
------ ----- ---- --------
----- --------- ------- --------------- -
------------ - ------- -- -
------------------------ -
------- -
-- ------
--
------------------ -- -
------ ------------------------------ -- -----------
----------- -- -
------ ---
---
--
-------- -
------ -
-------------- ---------------------------- --
--
-
-
------ ------- ----------这里我们使用了 axios 库发送异步请求，返回的数据包含一个 items 属性，用于展示搜索结果列表。
展示搜索结果的图标
有时候搜索结果会包含图片、视频、音频等媒体类型，我们可以根据搜索结果的类型在搜索框下拉菜单中展示不同的图标。为此我们可以扩展结果项的 props，例如：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------------- ---- -----------------
----- --------- ------- --------------- -
------------ - ------- -- -
-- ---
--
------------ - -------- -- -
--------------------
--
-------- -
------ -
--------------
----------------------------
----------------------------
-------------------------------- -- -
-----
---- ------------------ ---------- --
--------------
------
--
----------
- ------ -------- ------ ----------- --
- ------ --------- ------ ------------ --
- ------ --------- ------ ------------ --
--
--
--
-
-
------ ------- ----------这里我们扩展了选项的 props，增加了一个 image 属性用于展示图标。在 renderMenuItemChildren 回调函数中，我们根据 option 中的 image 属性渲染图标和标签。
搜索框历史记录
有时候我们需要在搜索框中展示用户最近的搜索历史记录，这可以利用 localStorage 实现。具体代码如下所示：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------------- ---- -----------------
----- --------- ------- --------------- -
----- - -
----------- ---
-------- ---
--
------------------- -
----- ----------- - ------------------------------- -- -----
----- ------- - ------------------------
--------------- ------- ---
-
------------ - ------- -- -
---------------------------------- -------
----- ----------- - ------------------------------- -- -----
----- ------- - ------------------------
-- -------------------------- -
--------------------
------------------------------- -------------------------
-
-- ---
--
-------- -
------ -
--------------
----------------------------
------------
-----------------------------------------
------------------------------------------------------------- ----
--
--
-
-
------ ------- ----------这里我们在组件挂载后从 localStorage 中获取 history 数组，然后在 handleSearch 回调函数中从 localStorage 中获取 searchText，将其添加到 history 数组中，并保存到 localStorage 中。最后，我们将 history 的最后 10 个元素展示在 suggestionResults 中。
搜索结果排序
有时候我们需要将搜索结果按照一定的规则排序，这可以利用排序函数实现。具体代码如下所示：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------------- ---- -----------------
----- --------- ------- --------------- -
------------ - ------- -- -
----- ------- - -
- ------ -------- ------ -- --
- ------ --------- ------ -- --
- ------ --------- ------ - --
--
----- ------------- - ----------------------- -- ------------------------------
---------------------- -- -- ------- - ---------
------ -------------------------- -- --------------
--
-------- -
------ -
-------------- ---------------------------- --
--
-
-
------ ------- ----------这里我们对 options 数组进行了过滤和排序，然后返回一个新的数组。
总结
hodc-typeahead 是一个非常灵活的 React 自动完成搜索框组件，可以方便地实现搜索框下拉提示和搜索结果展示功能。在使用时，我们可以根据自己的需求实现搜索结果异步获取、结果项扩展、历史记录、搜索结果排序等功能。希望本文能够对您的前端技术学习和开发工作有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005571581e8991b448d400e