本教程将指导您如何在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; } 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将更新的区域。
User SEARCH HERE
<input type="search" name="searchedValue" id="searchedValue" value="">
Department <option value="CSE" >CSE <option value="EEE" >EEE <option value="ME" >ME Year <option value="first" >First Year <option value="second" >Second Year <option value="third" >Third Year <option value="fourth" >Fourth Year
<input type="date" id="fromDate" name="fromDate" value=""> <input type="date" id="toDate" name="toDate" value="">
0) { %> { %>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 = `No results found
${result.id}
${result.name}
${result.description}
`; searchResultsContainer.appendChild(resultElement); }); } else { searchResultsContainer.innerHTML = 'No results found
'; } }) .catch(error => { console.error('Error fetching search results:', error); searchResultsContainer.innerHTML = `Error loading results: ${error.message}
`; }); }, 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渲染，不需要在此处再次调用
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动态搜索：无刷新实时结果更新教程的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1532779.html
微信扫一扫 
支付宝扫一扫 
