javascript - Vanilla JavaScript 搜索 - 如何添加多个字段?
问题描述
此功能正在从 Json 数据中搜索字段“标题”。请问,我该如何修改它以包含多个字段,例如:“tags”、“author”等?谢谢!
document.addEventListener('DOMContentLoaded', function(event) {
const search = document.getElementById('search');
const results = document.getElementById('results');
let data = [];
let search_term = '';
fetch('/search.json')
.then(response => response.json())
.then(data_server => {
data = data_server;
});
search.addEventListener('input', event => {
search_term = event.target.value.toLowerCase();
showList();
});
const showList = () => {
results.innerHTML = '';
if (search_term.length <= 0) return;
const match = new RegExp(`${search_term}`, 'gi');
let result = data.filter(name => match.test(name.title));
if (result.length == 0) {
const li = document.createElement('li');
li.innerHTML = `No results found `;
results.appendChild(li);
}
result.forEach(e => {
const li = document.createElement('li');
li.innerHTML = `<a href="${e.url}">${e.title}</a>`;
results.appendChild(li);
});
};
});
解决方案
改变
let result = data.filter(name => match.test(name.title));
至
let result = data.filter(name => match.test(name.title) || match.test(name.tags) || match.test(name.auther));
推荐阅读
- javascript - 使用 redis 管理亚马逊翻译
- javascript - 如何在 RRule.js 中排除日期?
- mysql - MySQL join 语句语法问题
- javascript - Angular - 无法维持活动课程
- c# - Microsoft.Web.Administration 查找 IIS 反向代理后面的 Kestrel 进程
- android-management-api - 请求增加 Android Management API 设备限制
- python - 在 PyQt5 中通过命令行调用外部程序时,有没有办法阻止 GUI 冻结?
- talend - Talend:将 CSV 数据插入父子表
- java - 将一个 hashmap 列表连接成一个与它们相同的 otder 并且不覆盖密钥
- node.js - 使用 Express.JS 为矢量图块发送多个响应