Material Design 是 Google 推出的一种新的设计语言，它以平面化、简洁、清晰为特点，受到了广泛关注和应用。本文将以实现 Material Design 的搜索框效果及关键字搜索功能为例，介绍如何用前端技术实现。
实现思路
Material Design 的搜索框效果通常包含以下几个要素：
- 搜索框的边框和背景色
- 搜索框内的提示文字和清除按钮
- 点击搜索按钮或按下回车键触发搜索功能
关键字搜索功能则需要监听输入框的变化，实时展现搜索结果。
综合考虑，我们可以采用如下实现思路：
- 使用 HTML/CSS 实现搜索框的样式
- 使用 JavaScript 监听搜索框的变化，实时获取并展示搜索结果
- 添加搜索按钮及回车键的监听，触发搜索功能
下面分别介绍具体实现步骤。
实现步骤
HTML/CSS 实现搜索框样式
为了实现 Material Design 的效果，我们需要定义搜索框的边框和背景色，以及搜索框内的提示文字和清除按钮。
<div class="search-container"> <input type="text" placeholder="Search..."> <button class="search-button"><i class="fa fa-search"></i></button> </div>
-- -------------------- ---- ------- ----------------- - --------- --------- ------ ------ ------- ----- ------- --- ----- ----- -------------- ----- ----------------- ----- --------- ------- - ----------------- ---------------- - ------ ----- ------- ----- ------- ----- ----------------- ------------ -------- ----- ---------- ----- ------ ----- - ----------------- ---------------------- - -------- ----- - ----------------- -------------- - --------- --------- ---- -- ------ -- ------ ----- ------- ----- ------- ----- ----------------- ------------ ------ ----- ---------- ----- ------- -------- - ----------------- -------------------- - ------ ----- -展开代码
以上代码实现了一个带提示文字和清除按钮的搜索框，但还没有实现搜索功能和关键字搜索，接下来我们利用 JavaScript 实现。
JavaScript 实现搜索功能和关键字搜索
我们可以使用 keyup 事件监听搜索框的变化，每次变化时获取输入框的值，通过 AJAX 请求后端 API 获取搜索结果，并展示在搜索框下方。
<div class="search-container"> <input type="text" placeholder="Search..." id="search-input"> <button class="search-button" id="search-button"><i class="fa fa-search"></i></button> </div> <div id="search-results"></div>
-- -------------------- ---- ------- ----- ----------- - ---------------------------------------- ----- ------------ - ----------------------------------------- ----- ------------- - ------------------------------------------ ----- ------ - -- -- - ----- ----- - ------------------ -- ------- - -- ---- ---- --- ------ -- ------- - ---- - ----------------------- - --- - -- ------------------------------------- -- -- - --------- --- -------------------------------------- -- -- - --------- ---展开代码
以上代码实现了监听搜索框变化并实时展示搜索结果的功能，但还没有实现关键字搜索。下面我们为输入框添加 input 事件监听，每次输入时触发搜索。
searchInput.addEventListener('input', () => { search(); });
为了防止频繁触发搜索，可以采用节流函数的方式，例如使用 lodash 的 throttle 函数：
const searchWithThrottle = _.throttle(search, 300); searchInput.addEventListener('input', () => { searchWithThrottle(); });
最后，展示搜索结果及搜索框下划线的部分可以使用 CSS 实现。
-- -------------------- ---- ------- --------------- - --------- --------- ---- ----- ----- -- ------ ------ ----------- ------ ----------- ----- ------- --- ----- ----- -------------- - - ---- ----- ----------------- ----- -------- ---- - --------------- - - -------- ------ -------- ----- ---------- ----- ------ ----- ---------------- ----- - --------------- ------- - ----------------- -------- - ----------------- ---------------------- - ---------- - ------ ----- - ----------------- ---------- - --------- --------- ------- -- ----- -- ------ -- ------- ---- ----------------- ----- ----------- ----- ----- -展开代码
到此为止，我们已经成功实现了 Material Design 的搜索框效果及关键字搜索功能，并通过 HTML、CSS 和 JavaScript 技术实现了搜索框样式、事件监听、搜索请求等功能。
示例代码
示例代码可以参考代码仓库：https://github.com/wsyxbcl/material-search-box
以上代码仅为示例，具体实现应根据业务需求进行修改和优化。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67b81c8b306f20b3a659e1a4
