如何根据多个输入词过滤搜索结果?

Question

我想根据输入过滤搜索结果。到目前为止，我只从输入的第一个单词开始过滤，我不确定如何基于(可能的)多个单词/输入进行过滤。如果我搜索"有趣的故事"其中一个书名是stories，我想返回它作为匹配，就像输入是& funny&;一样。在我现在的代码中，我只会在我开始键入错误时返回该book。

const filteredSuggestions = suggestions
.filter(({name}) => {
const match = name.substr(0, searchInput.length);
return match && match.toLowerCase() === searchInput.toLowerCase();
});

I tried (it not working):

const filteredSuggestions = suggestions
.filter(({name}) => {
const nameArr = name.split(" ");
nameArr.map(name => {
const match = name.substr(0, searchInput.length);
return match && match.toLowerCase() === searchInput.toLowerCase();
})
});

Answer 1

您可以使用includes字符串方法来过滤搜索。这是方法

const filteredSuggestions = suggestions
.filter(({name}) => {
return name?.toLowerCase().includes(searchInput.toLowerCase())
});

这将匹配所有单词，包括在任何位置的输入。

但是如果你想只匹配那些首字母与输入值匹配的单词，那么你可以使用RegExp。

例如

const regex = new RegExp(`\b${userInput}`, "i");
const filteredSuggestions = suggestions
.filter(({name}) => {
return regex.test(result)
});

在这种情况下，如果你的搜索输入是's'，它将返回'有趣的故事'和'严肃的故事'。因为它将匹配搜索结果中任何单词的第一个字母。

但是如果你只想匹配搜索结果的第一个单词的第一个字母，那么你可以使用下面的RegExp

const regex = new RegExp(`^${userInput}`, "i");

在这种情况下，如果你的搜索输入是's'，它将只返回"Serious stories"

Answer 2

如何使用startsWith函数:

const books = [
'funny stories',
'tales',
'science',
'medicine'
],
display = document.getElementById('display'),
input = document.getElementById('input'),
results = document.getElementById('results');

display.innerHTML = JSON.stringify(books);
function onSearch(event)
{
const value = event.target.value.trim();
if( value )
{
const filtered = books.filter(book => book.startsWith(value));
results.innerHTML = filtered.length ? JSON.stringify(filtered) : '';
}
else
{
results.innerHTML = "";
}
}

<div id="display">
</div>
<br>
<input id="input" onkeyup="onSearch(event)" type="text">
<br> <br>
<div id="results">
</div>