Node.js+EJS实现动态搜索教程
时间：2025-11-18 13:06:58 347浏览 收藏
编程并不是一个机械性的工作，而是需要有思考，有创新的工作，语法是固定的，但解决问题的思路则是依靠人的思维，这就需要我们坚持学习和更新自己的知识。今天golang学习网就整理分享《Node.js+EJS动态搜索实现教程》，文章讲解的知识点主要包括，如果你对文章方面的知识点感兴趣，就不要错过golang学习网，在这可以对大家的知识积累有所帮助，助力开发能力的提升。
本教程将指导您如何在Node.js和EJS应用中实现无刷新动态搜索功能。通过利用JavaScript的DOM事件监听和Fetch API进行异步请求，我们将优化后端控制器以返回JSON数据，并在前端实时更新搜索结果，彻底解决传统表单提交导致的页面重载问题，显著提升用户体验。
在现代Web应用中，用户期望在输入搜索关键词或调整筛选条件时，能够即时看到结果更新，而无需点击提交按钮或等待页面刷新。这正是动态搜索的核心价值。本教程将针对一个Node.js Express应用结合EJS模板引擎的场景，详细阐述如何构建一个高效、响应式的动态搜索系统。
1. 问题分析与现有代码审视
在提供的代码中，存在两个主要问题，导致动态搜索功能未能按预期工作：
- oninput="this.form.submit()" 导致的页面重载： 在user.ejs的搜索输入框上，oninput="this.form.submit()" 属性使得每一次输入都会触发表单提交，导致整个页面刷新。这不仅阻止了JavaScript中fetch请求对#search-results div的局部更新，也可能与req.flash机制产生冲突，因为req.flash通常用于一次性消息，且在重定向后才会清除。
- 后端响应类型不匹配： 前端JavaScript的updateSearchResults函数使用fetch请求，并期望从/search路径获取JSON格式的搜索结果 (.then(response => response.json()))。然而，后端user.controllers.js中的getHome函数（通常处理/或/search路由）最终是调用res.render('../Views/user.ejs', ...)来渲染EJS模板，而不是返回JSON数据。req.flash('search_results', search_results) 也是为EJS渲染准备的，不适合直接作为AJAX响应。
为了解决这些问题，我们需要对前端和后端进行相应的改造。
2. 后端控制器优化：提供JSON API
为了支持前端的异步请求，我们需要一个能够返回JSON格式搜索结果的后端API端点。我们可以修改现有的getHome函数，使其能够根据请求类型（是普通页面加载还是AJAX请求）返回不同的响应，或者创建一个新的专用API函数。考虑到清晰性和职责分离，我们推荐创建一个新的API函数来处理AJAX请求。
user.controllers.js 改造：
我们将保留getHome用于初始页面加载和渲染EJS，并创建一个getSearchResultsAPI函数来专门处理前端的fetch请求。
const { pool } = require('../config/database.config');
const MiniSearch = require('minisearch');
const userModels = require('../models/user.models'); // 假设 formatDate 在这里
// 辅助函数：执行搜索和过滤逻辑
const performSearchAndFilter = async (searchedValue, deptFilter, yearFilter, fromDate, toDate) => {
const all_results = [];
const client = await pool.connect();
try {
const query = `select * from "users"`;
const result = await client.query(query);
result.rows.forEach((row) => {
all_results.push(row);
});
} catch (err) {
console.error("Database query error:", err);
// 可以在这里抛出错误或返回空数组
return [];
} finally {
client.release(); // 确保释放客户端
}
const minisearch = new MiniSearch({
fields: ['id', 'name', 'description', 'dept', 'year', 'fromDate', 'toDate'],
storeFields: ['id', 'name', 'description', 'dept', 'year', 'fromDate', 'toDate'],
});
minisearch.addAll(all_results);
const filterCriteria = (result, filters) => {
return Object.entries(filters).every(([key, value]) => {
if (!value) {
return true;
}
if (key === 'fromDate') {
const formattedDate = userModels.formatDate(result.fromDate);
return value <= formattedDate;
}
if (key === 'toDate') {
const formattedDate = userModels.formatDate(result.toDate);
return value >= formattedDate;
}
return result[key] !== undefined && result[key] === value;
});
};
const filters = {
dept: deptFilter,
year: yearFilter,
fromDate: fromDate,
toDate: toDate,
};
let results = [];
if (searchedValue) {
results = minisearch.search(searchedValue, {
prefix: true,
fuzzy: 0.4,
filter: (result) => filterCriteria(result, filters),
});
} else {
results = all_results.filter((result) => filterCriteria(result, filters));
}
return results.map((result) => ({
id: result.id,
name: result.name,
description: result.description,
}));
};
// 首页渲染函数 (保持不变，用于首次加载页面)
const getHome = async (req, res) => {
const searchedValue = req.query.searchedValue || '';
const deptFilter = req.query.deptFilter || '';
const yearFilter = req.query.yearFilter || '';
const fromDate = req.query.fromDate || '';
const toDate = req.query.toDate || '';
const search_results = await performSearchAndFilter(searchedValue, deptFilter, yearFilter, fromDate, toDate);
// 渲染EJS模板，包含初始或刷新后的搜索结果
res.render('../Views/user.ejs', {
search_results: search_results,
// 传递当前筛选值，以便前端可以回显
currentFilters: { searchedValue, deptFilter, yearFilter, fromDate, toDate }
});
};
// 新增的API函数，用于处理AJAX请求，返回JSON数据
const getSearchResultsAPI = async (req, res) => {
try {
const searchedValue = req.query.searchedValue || '';
const deptFilter = req.query.deptFilter || '';
const yearFilter = req.query.yearFilter || '';
const fromDate = req.query.fromDate || '';
const toDate = req.query.toDate || '';
const search_results = await performSearchAndFilter(searchedValue, deptFilter, yearFilter, fromDate, toDate);
// 直接返回JSON数据
res.json({ search_results: search_results });
} catch (error) {
console.error("API search error:", error);
res.status(500).json({ error: "Internal Server Error" });
}
};
module.exports = {
getHome,
getSearchResultsAPI, // 导出新的API函数
};路由配置 (app.js 或 routes.js):
确保您的Express应用中，/ 路由映射到getHome，而/search（或/api/search）路由映射到getSearchResultsAPI。
// 示例 Express 路由配置
const express = require('express');
const router = express.Router();
const userController = require('./controllers/user.controllers');
router.get('/', userController.getHome); // 初始页面加载
router.get('/search', userController.getSearchResultsAPI); // AJAX请求
module.exports = router;3. 前端EJS与JavaScript改造：实现实时更新
前端的主要任务是移除导致页面重载的表单提交，并确保JavaScript能够监听所有相关输入的变化，然后通过fetch API向新的后端API端点发送请求，并将返回的JSON数据动态渲染到页面上。
user.ejs 改造：
- 移除 oninput="this.form.submit()"： 这是最关键的一步，它将阻止页面的自动刷新。
- 移除表单 action="/search" method="GET"： 因为我们将通过JavaScript进行异步请求，不再需要传统的表单提交。
- 为所有输入字段设置初始值： 如果您希望在页面刷新后保留用户的筛选条件，可以在EJS中设置输入字段的value属性。
- 确保 search-results div 存在： 这是JavaScript将更新的区域。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>User</title>
</head>
<body>
<!-- 移除 form action 和 method，也不再需要 submit 按钮 -->
<div>
<h1>SEARCH HERE</h1>
<input type="search" name="searchedValue" id="searchedValue" value="<%= currentFilters.searchedValue %>">
<br>
<label for="filter">Select a filter:</label>
<select id="deptFilter" name="deptFilter">
<option value="">Department</option>
<option value="CSE" <%= currentFilters.deptFilter === 'CSE' ? 'selected' : '' %>>CSE</option>
<option value="EEE" <%= currentFilters.deptFilter === 'EEE' ? 'selected' : '' %>>EEE</option>
<option value="ME" <%= currentFilters.deptFilter === 'ME' ? 'selected' : '' %>>ME</option>
</select>
<select id="yearFilter" name="yearFilter">
<option value="">Year</option>
<option value="first" <%= currentFilters.yearFilter === 'first' ? 'selected' : '' %>>First Year</option>
<option value="second" <%= currentFilters.yearFilter === 'second' ? 'selected' : '' %>>Second Year</option>
<option value="third" <%= currentFilters.yearFilter === 'third' ? 'selected' : '' %>>Third Year</option>
<option value="fourth" <%= currentFilters.yearFilter === 'fourth' ? 'selected' : '' %>>Fourth Year</option>
</select>
<br>
<label for="fromDate"> From </label>
<input type="date" id="fromDate" name="fromDate" value="<%= currentFilters.fromDate %>">
<label for="toDate"> To </label>
<input type="date" id="toDate" name="toDate" value="<%= currentFilters.toDate %>">
<br>
<!-- 移除 submit 按钮 -->
</div>
<div id="search-results">
<% if(search_results && search_results.length > 0) { %>
<% search_results.forEach((result) => { %>
<div>
<h1><%= result.id %></h1>
<h2><%= result.name %></h2>
<h3><%= result.description %></h3>
</div>
<% }) %>
<% } else { %>
<h1>No results found</h1>
<% } %>
</div>
<script>
const searchedValueInput = document.querySelector('#searchedValue');
const deptFilterInput = document.querySelector('#deptFilter');
const yearFilterInput = document.querySelector('#yearFilter');
const fromDateInput = document.querySelector('#fromDate');
const toDateInput = document.querySelector('#toDate');
const searchResultsContainer = document.querySelector('#search-results');
let searchTimeout; // 用于 debouncing
function updateSearchResults() {
clearTimeout(searchTimeout); // 清除之前的计时器
searchTimeout = setTimeout(() => { // 设置新的计时器
const searchedValue = searchedValueInput.value;
const deptFilter = deptFilterInput.value;
const yearFilter = yearFilterInput.value;
const fromDate = fromDateInput.value;
const toDate = toDateInput.value;
// 构建查询字符串
const queryParams = new URLSearchParams({
searchedValue: searchedValue,
deptFilter: deptFilter,
yearFilter: yearFilter,
fromDate: fromDate,
toDate: toDate
}).toString();
// 发送异步请求到新的API端点
fetch(`/search?${queryParams}`) // 注意这里指向 /search 路由
.then(response => {
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
return response.json();
})
.then(data => {
searchResultsContainer.innerHTML = ''; // 清空现有结果
if (data.search_results && data.search_results.length > 0) {
data.search_results.forEach(result => {
const resultElement = document.createElement('div');
resultElement.innerHTML = `
<h1>${result.id}</h1>
<h2>${result.name}</h2>
<h3>${result.description}</h3>
`;
searchResultsContainer.appendChild(resultElement);
});
} else {
searchResultsContainer.innerHTML = '<h1>No results found</h1>';
}
})
.catch(error => {
console.error('Error fetching search results:', error);
searchResultsContainer.innerHTML = `<h1>Error loading results: ${error.message}</h1>`;
});
}, 300); // 300毫秒的 debouncing 延迟
}
// 监听所有相关输入字段的变化
searchedValueInput.addEventListener('input', updateSearchResults);
deptFilterInput.addEventListener('change', updateSearchResults);
yearFilterInput.addEventListener('change', updateSearchResults);
fromDateInput.addEventListener('change', updateSearchResults);
toDateInput.addEventListener('change', updateSearchResults);
// 页面加载时执行一次搜索，以防页面刷新后需要重新加载数据
// updateSearchResults(); // 首次加载已由EJS渲染，不需要在此处再次调用
</script>
</body>
</html>4. 关键改进点与注意事项
- Debouncing (去抖动):
- 在searchedValueInput的input事件监听中，每次按键都会触发updateSearchResults。频繁的AJAX请求会增加服务器负担。
- 通过引入searchTimeout和setTimeout/clearTimeout，我们实现了去抖动。这意味着用户停止输入300毫秒后，才会发送实际的搜索请求。这显著提升了用户体验和系统性能。
- AJAX请求的URL构造：
- 使用URLSearchParams来构建查询字符串是更健壮和可读的方式，它能自动处理URL编码。
- 错误处理：
- 在fetch请求中增加了.then(response => { if (!response.ok) ... }) 和 .catch(error => ...)，用于处理网络错误或服务器返回的非2xx状态码。
- 初始页面加载：
- getHome函数现在负责在首次访问或页面刷新时渲染EJS，并带上初始的搜索结果。这意味着用户在刷新页面后，不会看到空白的搜索结果区域，而是会显示当前的搜索/筛选条件下的结果。
- 前端JavaScript的updateSearchResults函数在页面加载时不再需要显式调用，因为EJS已经完成了首次渲染。
- req.flash 的移除：
- 由于AJAX请求直接返回JSON，req.flash机制不再适用于实时更新。它主要用于在Express会话中存储一次性消息，并在重定向后传递给下一个请求。
通过上述改造，您的Node.js和EJS应用将拥有一个功能完善、响应迅速的动态搜索功能，大大提升用户体验。
好了，本文到此结束，带大家了解了《Node.js+EJS实现动态搜索教程》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！
相关阅读
更多>
-
502 收藏
-
501 收藏
-
501 收藏
-
501 收藏
-
501 收藏
最新阅读
更多>
-
250 收藏
-
323 收藏
-
177 收藏
-
226 收藏
-
225 收藏
-
407 收藏
-
275 收藏
-
173 收藏
-
283 收藏
-
313 收藏
-
206 收藏
-
282 收藏
课程推荐
更多>
-
- 前端进阶之JavaScript设计模式
- 设计模式是开发人员在软件开发过程中面临一般问题时的解决方案，代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景，打造一站式知识长龙服务，适合有JS基础的同学学习。
- 立即学习 543次学习
-
- GO语言核心编程课程
- 本课程采用真实案例，全面具体可落地，从理论到实践，一步一步将GO核心编程技术、编程思想、底层实现融会贯通，使学习者贴近时代脉搏，做IT互联网时代的弄潮儿。
- 立即学习 516次学习
-
- 简单聊聊mysql8与网络通信
- 如有问题加微信：Le-studyg；在课程中，我们将首先介绍MySQL8的新特性，包括性能优化、安全增强、新数据类型等，帮助学生快速熟悉MySQL8的最新功能。接着，我们将深入解析MySQL的网络通信机制，包括协议、连接管理、数据传输等，让
- 立即学习 500次学习
-
- JavaScript正则表达式基础与实战
- 在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。
- 立即学习 487次学习
-
- 从零制作响应式网站—Grid布局
- 本系列教程将展示从零制作一个假想的网络科技公司官网，分为导航，轮播，关于我们，成功案例，服务流程，团队介绍，数据部分，公司动态，底部信息等内容区块。网站整体采用CSSGrid布局，支持响应式，有流畅过渡和展现动画。
- 立即学习 485次学习