供参考，我从 这个视频 获取了代码。

我想设计一个搜索栏，里面的关键字是指向我文件夹中某个独立文件的链接。搜索栏工作正常，但问题在于由于所有关键字都是链接，某些字母会触发所有结果显示。例如，假设我把所有文件按水果命名，放在一个数组里，如下所示：

let avaliableKeywords = [
<a href='/fruits/apples.html'>Apples</a>
<a href='/fruits/bananas.html'>Bananas</a>
<a href='/fruits/oranges.html'>Oranges</a>
<a href='/fruits/strawberries.html'>Strawberries</a>
]

如果我输入 "a href" 或者 "fruits" 里的任意字母，所有结果都会显示出来，但我只想让水果本身可以被搜索。例如，输入 "e" 应该显示Apples、Oranges和 Strawberries，但不显示Bananas。输入 "f" 应该不返回任何结果，等等。

以下是我的代码的其余部分：

const resultsBox = document.querySelector(".result-box");
const inputBox = document.getElementById("input-box");

inputBox.onkeyup = function(){
    let result = [];
    let input = inputBox.value;
    if(input.length){
        result = avaliableKeywords.filter((keyword)=>{
            return keyword.toLowerCase().includes(input.toLowerCase());
        });
        console.log(result);
    }
    display(result);


    /*if(!result.length){
        resultsBox.innerHTML = '';
    }*/
}

function display(result){
    const content = result.map((list)=>{
        return "<li>" + list + "</li>";
    });
    resultsBox.innerHTML = "<ul>" + content.join('') + "</ul>";
}

解决方案

你的意图显然是在一个框里显示经过筛选的链接。然而，过滤本身由于链接内容而产生了错误的正样本，因为你打算通过链接的内部文本来筛选，并在一个框里显示匹配项的完整链接。实现这一点的一种方法是根据内部文本来推断。

let avaliableKeywords = [
`<a href='/fruits/apples.html'>Apples</a>`,
`<a href='/fruits/bananas.html'>Bananas</a>`,
`<a href='/fruits/oranges.html'>Oranges</a>`,
`<a href='/fruits/strawberries.html'>Strawberries</a>`
]
function innerText(input) {
    return input.split("</a>")[0].split("'>")[1]
}
const resultsBox = document.querySelector(".result-box");
const inputBox = document.getElementById("input-box");

inputBox.onkeyup = function(){
    let result = [];
    let input = inputBox.value;
    if(input.length){
        result = avaliableKeywords.filter((keyword)=>{
            return innerText(keyword).toLowerCase().includes(input.toLowerCase());
        });
        resultsBox.innerHTML = result.join();
    }
    display(result);


    /*if(!result.length){
        resultsBox.innerHTML = '';
    }*/
}

function display(result){
    const content = result.map((list)=>{
        return "<li>" + list + "</li>";
    });
    resultsBox.innerHTML = "<ul>" + content.join('') + "</ul>";
}

<input id="input-box" type="text">
<div class="result-box">

另一种方法是使用键值对，通过键进行搜索并显示值：

let avaliableKeywords = [
{key: 'Apples', value: `<a href='/fruits/apples.html'>Apples</a>`},
{key: 'Bananas', value: `<a href='/fruits/bananas.html'>Bananas</a>`},
{key: 'Oranges', value: `<a href='/fruits/oranges.html'>Oranges</a>`},
{key: 'Strawberries', value: `<a href='/fruits/strawberries.html'>Strawberries</a>`},
]
const resultsBox = document.querySelector(".result-box");
const inputBox = document.getElementById("input-box");

inputBox.onkeyup = function(){
    let result = [];
    let input = inputBox.value;
    if(input.length){
        result = avaliableKeywords.filter(link => {
            return link.key.toLowerCase().includes(input.toLowerCase());
        }).map(item => item.value);
        resultsBox.innerHTML = result.join();
    }
    display(result);


    /*if(!result.length){
        resultsBox.innerHTML = '';
    }*/
}

function display(result){
    const content = result.map((list)=>{
        return "<li>" + list + "</li>";
    });
    resultsBox.innerHTML = "<ul>" + content.join('') + "</ul>";
}

<input id="input-box" type="text">
<div class="result-box">