如果用户键入错误的单词，如何隐藏搜索结果?

Question

我正在开发这个小的香草JS应用程序，从JSON文件中获取数据并根据用户输入的内容以HTML显示结果。问题是，如果用户键入的字母=结果之一，他们可能会键入错误的单词，并且这些结果将继续显示。如果发生这种情况，我希望信息隐藏起来。有什么建议吗？

http://starwarsinfo.surge.sh/

例如，如果您输入字母"p"，则会显示所有电影，但是如果您通过键入"门户"之类的单词来完成此操作，则所有电影仍将显示。

const search = document.getElementById("search");
const matchList = document.getElementById("match-list");
const searchStates = async (searchText) => {
const res = await fetch("../data/movies.json");
const movies = await res.json();
let matches = movies.filter((state) => {
const regex = new RegExp(`${searchText}`, "gi");
return state.title.match(regex) || state.episode_number.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="card card-body mb-1">
<span class="text-primary"><h4>${match.title}</h4></span><br></h4>
<small><h6>About:</h6><br> ${match.description}</small>
</div>`
)
.join("");
matchList.innerHTML = html;
}
};
search.addEventListener("input", () => searchStates(search.value));

Answer 1

嘿，尝试添加一个额外的条件

let matches = movies.filter(state => {
const regex = new RegExp(`${searchText}`, 'gi');
if( !state.title.match(regex) || !state.episode_number.match(regex) ){
matches = [];
matchList.innerHTML = '';
} else return true;
});

Answer 2

我没有知识来建议regex但您可以达到以下预期的结果。

请尝试此示例

const movies = [
{
title: "Star Wars: Episode I - The Phantom Menace",
episode_number: "1",
},
{
title: "Star Wars: Episode II - Attack of the Clones",
episode_number: "2",
},
{
title: "Star Wars: Episode III - Revenge of the Sith",
episode_number: "3",
},
];
const searchStates = (searchText) => {
const matches = movies.filter((state) => {
return (
state.title.toLowerCase().includes(searchText.toLowerCase()) ||
state.episode_number === searchText
);
});
console.log(matches);
};
searchStates("clones");

我还建议您不要为键入的每个字母调用 api，某些 API 在一天中允许的请求数量有限，并且每次按下某个键时的响应都会很快达到限制。更好的替代方法是获取站点加载的数据，将结果保存到变量中，然后从那里筛选数据。