时间戳

首页 > 解决方案 > 如何在搜索栏中设置默认搜索结果？

javascript - 如何在搜索栏中设置默认搜索结果？

问题描述

我正在尝试使用 JavaScript 和 json 构建一个搜索栏。当任何访问者访问该页面时，我需要搜索栏显示一些默认搜索结果。我将值设置为搜索栏并尝试过，但在用户删除搜索字段内的文本之前没有搜索结果。每当有人访问该页面时，我如何显示默认或预定义的搜索结果。

const search = document.getElementById("search");
const matchList = document.getElementById("match-list");

const searchWorker = async (searchText) => {
  const res = await fetch("workers.json");
  const states = await res.json();
  let matches = states.filter((state) => {
    const regex = new RegExp(`${searchText}`, "gi");
    return state.name.match(regex);
  });
  if (searchText.length === 0) {
    matches = [];
    matchList.innerHTML = "";
  }
  outputHtml(matches);
};

const outputHtml = (matches) => {
  if (matches.length > 0) {
    const html = matches
      .map(
        (match) => `<div class=" search-result">
            <a href="${match.portfolio}">
            ${match.name} - ${match.age}<br/>
            <small>Salery - ${match.salary}</small>
            </a></div>
            `
      )
      .join("");
    matchList.innerHTML = html;
  }
};
search.addEventListener("input", () => searchWorker(search.value));
 <input id="search" type="search" value="sam" />
    <div id="match-list"></div>
      </div>

我的 json 文件：

[
{
    "name": "sam",
    "age": "26",
    "salary": "20000",
    "portfolio": "https://www.example.com/1"
},
{
    "name": "tony",
    "age": "30",
    "salary": "30000",
    "portfolio": "https://www.example.com/2"
},
{
    "name": "sam",
    "age": "24",
    "salary": "15000",
    "portfolio": "https://www.example.com/3"
}]

标签： javascripthtmljson

解决方案

只需searchWorker(search.value);在顶层代码中运行该函数。像这样：

search.addEventListener("input", () => searchWorker(search.value));
searchWorker(search.value);

这将显示输入默认值的结果。

代码笔： https ://codepen.io/manaskandelwal1/pen/OJmXrMM

推荐阅读