前言
Material Design 是 Google 推出的一套设计语言，旨在为设计师和开发者提供一种跨平台的设计风格。在前端开发中，使用 Material Design 可以让我们的网站或应用更加美观、易用和一致性。
本文将介绍如何使用 Material Design 实现动态搜索框，并分享一些实战经验和技巧。
实现思路
动态搜索框是一种常见的 UI 组件，用户可以在搜索框中输入关键字，然后实时显示搜索结果。在 Material Design 中，我们可以使用 Text Field 和 List 来实现这个功能。
具体实现思路如下：
- 创建一个 Text Field，用于输入关键字。
- 监听 Text Field 的输入事件，当用户输入关键字时，触发搜索操作。
- 根据搜索结果，动态生成一个 List，用于展示搜索结果。
- 监听 List 的点击事件，当用户点击某个搜索结果时，将结果填充到 Text Field 中。
实现步骤
1. 创建 Text Field
首先，我们需要创建一个 Text Field。在 Material Design 中，Text Field 有多种样式和状态，例如常规状态、聚焦状态、错误状态等。我们可以根据需要选择相应的样式和状态。
下面是一个常规状态的 Text Field 示例代码：
<div class="mdc-text-field"> <input type="text" class="mdc-text-field__input" id="search-input"> <label class="mdc-floating-label" for="search-input">Search</label> <div class="mdc-line-ripple"></div> </div>
在这个示例中，我们使用了 Material Components for the Web（简称 MDC-Web）库提供的 Text Field 组件。MDC-Web 是 Google 推出的一个 Material Design 风格的前端组件库，可以方便地在网站或应用中使用 Material Design。
2. 监听 Text Field 的输入事件
接下来，我们需要监听 Text Field 的输入事件，当用户输入关键字时，触发搜索操作。在 MDC-Web 中，可以通过监听 input 事件来实现这个功能。
下面是一个监听 Text Field 输入事件的示例代码：
const searchInput = document.getElementById('search-input');
searchInput.addEventListener('input', event => {
const keyword = event.target.value;
// TODO: 根据关键字搜索并生成搜索结果列表
});在这个示例中，我们使用了 JavaScript 的事件监听机制来监听 input 事件。当用户输入关键字时，我们获取输入框的值，并调用搜索函数来生成搜索结果列表。
3. 根据搜索结果生成 List
接下来，我们需要根据搜索结果生成一个 List，用于展示搜索结果。在 MDC-Web 中，可以使用 List 组件来实现这个功能。
下面是一个生成 List 的示例代码：
-- -------------------- ---- -------
----- ------------- - -
--------
---------
---------
---------
----------
--
----- ------ - ------------------------------------------
----- ---- - --- ----------------
-------- -------------------------- -
------ ------------------ -- -
------ -
--- --------------------- --------------
----- --------------------------------------------
-----
--
------------
-
-------- ------------------- -
----- --------- - ---------------------------
---------------- - ----------
----------------- - ---------------------------------------------------------
-
--------------------------在这个示例中，我们使用了 MDC-Web 的 List 组件来生成搜索结果列表。首先，我们定义了一个搜索结果数组，然后通过 generateListItems 函数将搜索结果转换为 List Item 的 HTML 代码。最后，我们将生成的 List Item 插入到 List 中。
需要注意的是，List 组件要求 List Item 必须包含一个 role="option" 属性，用于支持键盘导航和屏幕阅读器等辅助功能。
4. 监听 List 的点击事件
最后，我们需要监听 List 的点击事件，当用户点击某个搜索结果时，将结果填充到 Text Field 中。在 MDC-Web 中，可以使用 List 组件提供的 selected 事件来实现这个功能。
下面是一个监听 List 点击事件的示例代码：
listEl.addEventListener('MDCList:action', event => {
const index = event.detail.index;
const result = searchResults[index];
searchInput.value = result;
});在这个示例中，我们使用了 List 组件提供的 selected 事件来监听 List 的点击事件。当用户点击某个 List Item 时，我们获取该 List Item 的索引，然后将对应的搜索结果填充到 Text Field 中。
总结
本文介绍了如何使用 Material Design 实现动态搜索框，并分享了一些实战经验和技巧。需要注意的是，Material Design 不仅仅是一种设计风格，还包含了一套完整的设计规范和组件库。在实现动态搜索框的过程中，我们使用了 Material Design 中的 Text Field 和 List 组件，这些组件可以帮助我们快速开发出符合 Material Design 规范的 UI 组件。
完整示例代码如下：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------------- ------ ------ -----------
----- ---------------- ---------------------------------------------------------------
----- ---------------- -------------------------------------------------------------------------------
----- ---------------- -----------------------------------------------------------------------------------------
------- --------------------------------------------------------------------------------------
------- ------------------------------------------------------------------------------------------------
-------
---------- -
-------- -----
--------------- -------
------------ -------
----------- -----
-
------------- -
------ ------
-------------- -----
-
--------------- -
------ ------
----------- ------
----------- -----
-
--------
-------
------
---- ------------------
---- ------------------- ----------------
------ ----------- ----------------------------- ------------------
------ -------------------------- ---------------------------------
---- ------------------------------
------
---- --------------------- --------- ------------------- ---------------------
------
--------
----- ----------- - ----------------------------------------
----- ------------- - -
--------
---------
---------
---------
----------
--
----- ------ - ------------------------------------------
----- ---- - --- ----------------
-------- -------------------------- -
------ ------------------ -- -
------ -
--- --------------------- --------------
----- --------------------------------------------
-----
--
------------
-
-------- ------------------- -
----- --------- - ---------------------------
---------------- - ----------
----------------- - ---------------------------------------------------------
-
------------------------------------- ----- -- -
----- ------- - -------------------
----- --------------- - --------------------------- -- -
------ -----------------------------------------------------
---
----------------------------
---
----------------------------------------- ----- -- -
----- ----- - -------------------
----- ------ - ---------------------
----------------- - -------
---
---------
-------
-------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6586a650d2f5e1655d10d385