使用 Material Design 实现动态搜索框的实战经验-JavaScript中文网-JavaScript教程资源分享门户

前言

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 的示例代码：

// javascriptcn.com 代码示例
const searchResults = [
  'Apple',
  'Banana',
  'Cherry',
  'Durian',
  'Eggplant'
];

const listEl = document.getElementById('search-results');
const list = new MDCList(listEl);

function generateListItems(results) {
  return results.map(result => {
    return `
      <li class="mdc-list-item" role="option">
        <span class="mdc-list-item__text">${result}</span>
      </li>
    `;
  }).join('');
}

function updateList(results) {
  const listItems = generateListItems(results);
  listEl.innerHTML = listItems;
  list.listElements = [].slice.call(listEl.querySelectorAll('.mdc-list-item'));
}

updateList(searchResults);

在这个示例中，我们使用了 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 组件。

完整示例代码如下：

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Material Design Search Box</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@material/list@3.2.2/dist/mdc.list.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@material/textfield@3.2.2/dist/mdc.textfield.min.css">
  <script src="https://cdn.jsdelivr.net/npm/@material/list@3.2.2/dist/mdc.list.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@material/textfield@3.2.2/dist/mdc.textfield.min.js"></script>
  <style>
    .container {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 50px;
    }
    .search-field {
      width: 300px;
      margin-bottom: 20px;
    }
    .search-results {
      width: 300px;
      max-height: 200px;
      overflow-y: auto;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="search-field 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>
    <div class="search-results mdc-list" id="search-results" role="listbox"></div>
  </div>
  <script>
    const searchInput = document.getElementById('search-input');
    const searchResults = [
      'Apple',
      'Banana',
      'Cherry',
      'Durian',
      'Eggplant'
    ];
    const listEl = document.getElementById('search-results');
    const list = new MDCList(listEl);

    function generateListItems(results) {
      return results.map(result => {
        return `
          <li class="mdc-list-item" role="option">
            <span class="mdc-list-item__text">${result}</span>
          </li>
        `;
      }).join('');
    }

    function updateList(results) {
      const listItems = generateListItems(results);
      listEl.innerHTML = listItems;
      list.listElements = [].slice.call(listEl.querySelectorAll('.mdc-list-item'));
    }

    searchInput.addEventListener('input', event => {
      const keyword = event.target.value;
      const filteredResults = searchResults.filter(result => {
        return result.toLowerCase().includes(keyword.toLowerCase());
      });
      updateList(filteredResults);
    });

    listEl.addEventListener('MDCList:action', event => {
      const index = event.detail.index;
      const result = searchResults[index];
      searchInput.value = result;
    });
  </script>
</body>
</html>

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6586a650d2f5e1655d10d385