Material Design 中如何实现快速搜索功能

在现代 Web 应用程序中，搜索功能已成为必不可少的组件。Material Design 是一种设计语言，它提供了一些非常好用而且美观的搜索控件，可以让用户快速方便地搜索应用程序中的内容。在本文中，我们将详细介绍如何在 Material Design 中实现一个快速搜索功能。

什么是 Material Design

Material Design 是 Google 推出的一种现代化的设计语言，其目标是为了创造一种更具有深度、更真实、更有意义的用户体验。 Material Design 的最大特点是强调平面化设计以及运用物理学效果来提高用户体验。它具有简洁、色彩丰富、直观、具有层次感的特点。

快速搜索功能的设计和实现

在 Material Design 中，快速搜索控件通常使用一个搜索框，用户在搜索框中输入关键词后，控件会实时过滤相关的数据。下面是一个简单的实现示例：

HTML 代码

<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
  <input class="mdl-textfield__input" type="text" id="search">
  <label class="mdl-textfield__label" for="search">Search...</label>
</div>

<table class="mdl-data-table mdl-js-data-table">
  <thead>
    <tr>
      <th class="mdl-data-table__cell--non-numeric">Name</th>
      <th>Age</th>
      <th>Gender</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="mdl-data-table__cell--non-numeric">张三</td>
      <td>28</td>
      <td>男</td>
      <td>zhangsan@gmail.com</td>
    </tr>
    <tr>
      <td class="mdl-data-table__cell--non-numeric">李四</td>
      <td>25</td>
      <td>女</td>
      <td>lisi@gmail.com</td>
    </tr>
  </tbody>
</table>

CSS 代码

.mdl-textfield__input {
  border:none;
  outline:none;
  width:100%;
  padding:14px 20px;
  font-size:16px;
  font-weight:300;
}

.mdl-textfield__label {
  top:calc(50% - 0.5em);
  left:20px;
  font-size:16px;
  font-weight:300;
  color:#9e9e9e;
  pointer-events:none;
  position:absolute;
  transition:300ms cubic-bezier(0.4,0,0.2,1);
}

.mdl-textfield__input:focus + .mdl-textfield__label,
.mdl-textfield__input:not(:placeholder-shown) + .mdl-textfield__label {
  top:-20px;
  font-size:12px;
  color:#2196f3;
  transition:300ms cubic-bezier(0.4,0,0.2,1);
}

.mdl-data-table {
  width:100%;
  border-collapse:collapse;
  margin-top:20px;
  box-shadow:none;
}

.mdl-data-table th {
  font-size:14px;
  font-weight:400;
  color:#757575;
  text-align:left;
}

.mdl-data-table td {
  font-size:16px;
  font-weight:300;
  color:#000;
  text-align:left;
  border-bottom:1px solid #f0f0f0;
}

.mdl-data-table__cell--non-numeric {
  text-align:left;
}

JavaScript 代码

var input = document.getElementById('search');
var table = document.getElementsByTagName('table')[0];
var tableRows = table.getElementsByTagName('tr');

input.addEventListener('keyup', function(event) {
  var searchTerm = event.target.value.toLowerCase();
  for(var i = 0; i < tableRows.length; i++) {
    var cells = tableRows[i].getElementsByTagName('td');
    var rowText = '';
    for(var j = 0; j < cells.length; j++) {
      rowText += cells[j].textContent.toLowerCase() + ' ';
    }
    if(rowText.indexOf(searchTerm) === -1) {
      tableRows[i].style.display = 'none';
    } else {
      tableRows[i].style.display = '';
    }
  }
});

上述代码使表格具有搜索功能，用户在搜索框中键入关键词时，该函数会使用触发事件的目标对象的值，搜索表格标记，并在每个单元格上执行文本搜索。一旦查找到该单元格中文本的一个或多个实例，它就会展示该单元格。

总结

Material Design 为搜索功能提供了很好的支持，通过使用简单的搜索控件，您可以轻松地增加搜索功能。在应用程序设计中，保持应用程序简单，直观和易于使用是非常重要的。希望这篇文章可以帮助您在 Material Design 中实现搜索功能，并提高用户体验。

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