Material Design 风格下的搜索框实现教程-JavaScript中文网-JavaScript教程资源分享门户

在现代网站和应用中，搜索框已经成为了一个必不可少的组件。在 Material Design 中，搜索框也有了自己的独特设计语言。在本篇文章中，我们将会介绍 Material Design 风格下的搜索框实现教程。

基本概述

在 Material Design 中，搜索框一般包含一个文本输入框和一个输入框右侧的搜索按钮。文本输入框的底部有一条下划线，用来表示当前输入框的状态。例如，当用户输入内容时，下划线会变成蓝色；当用户提交搜索请求时，下划线会变成绿色。

为了实现这些特殊的效果，我们需要一些特殊的 CSS 样式和 JavaScript 代码。

实现步骤

HTML

首先，我们需要将搜索框的 HTML 结构定义好。一个基本的 HTML 结构应该如下所示：

<form class="search-form">
  <div class="input-field">
    <input id="search" type="search" required>
    <label class="label-icon" for="search"><i class="material-icons">search</i></label>
  </div>
</form>

这里，我们使用了 Materialize CSS 框架中的一个表单组件作为搜索框的基本 HTML 结构。其中，class="search-form" 表示这是一个搜索表单，class="input-field" 表示这是一个输入框，id="search" 是输入框的 ID，type="search" 表示这是一个搜索类型的输入框，required 表示输入框必须填写。这里，我们使用了 Material Icons 图标库中的一个搜索图标来作为搜索框的按钮。

CSS

我们需要写一些 CSS 样式来实现搜索框的特殊效果。一个基本的样式表应该如下所示：

.input-field input[type=search]:focus + label {
  color: #2196F3 !important;
}

.input-field input[type=search]:focus {
  border-bottom: 2px solid #2196F3 !important;
  box-shadow: none !important;
}

其中，.input-field input[type=search]:focus + label 表示当输入框获得焦点时，下划线字体的颜色为蓝色；.input-field input[type=search]:focus 表示当输入框获得焦点时，下划线的颜色为蓝色、阴影效果被取消。

JavaScript

最后，我们需要写一些 JavaScript 代码来添加特殊的搜索效果。一个基本的 JavaScript 代码应该如下所示：

document.addEventListener('DOMContentLoaded', function() {
  var elems = document.querySelectorAll('.autocomplete');
  var instances = M.Autocomplete.init(elems, options);
});

其中，我们使用了 Materialize CSS 框架中的一个 JavaScript 组件 Autocomplete 来实现搜索功能。这里，我们通过 document.querySelectorAll() 方法获取了所有 .autocomplete 类的元素，并通过 M.Autocomplete.init() 方法初始化了它们。当用户输入搜索内容时，Autocomplete 组件会提供相应的搜索建议和结果。

示例代码

完整的 Material Design 风格下的搜索框示例代码如下所示：

-- -------------------- ---- -------
--------- -----
------
  ------
    ----- ----------------
    --------------- ------ ------ -----------
    ----- -------------------------------------------------------------- -----------------
    ----- ---------------- ----------------------------------------------------------------------------------------
    ------- ----------------------------------------------------------------------------------------------
    ------ ----------------
      ------------ ------------------------ - ----- -
        ------ ------- -----------
      -
    
      ------------ ------------------------ -
        -------------- --- ----- ------- -----------
        ----------- ---- -----------
      -
    --------
  -------
  ------
    ---- ------------------
      ----- --------------------
        ---- --------------------
          ------ ----------- ------------- ---------
          ------ ------------------ --------------- -----------------------------------------
        ------
      -------
    ------
    ------- -----------------------
      --------------------------------------------- ---------- -
        --- ----- - -------------------------------------------
        --- --------- - -------------------------- ---------
      ---
    ---------
  -------
-------

结论

通过上述步骤即可实现 Material Design 风格下的搜索框，这样的搜索框既美观又实用，是现代网站和应用中的必不可少的组件。我们希望本文对您有所帮助，并能够在您的项目中得到实际运用。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/674d7e67d773cf2d54cf68be