如何在JavaScript中将文件夹关联到自动补全搜索栏选项？

核心思路 #

给每个关键词绑定对应的文件夹路径，点击选项时通过JavaScript触发页面跳转，同时保留原有的搜索补全功能。

修改方案 #

1. 调整关键词数组，添加路径映射

将原纯字符串数组改为包含名称和文件夹路径的对象数组，明确每个名称对应的目标文件夹：

let availableKeywords = [
    { name: 'Afonso Nabeto', folder: './1/' },
    { name: 'Bianca Silva', folder: './2/' },
    { name: 'Duarte Rocha', folder: './3/' },
    { name: 'Guilherme Costa', folder: './4/' },
    { name: 'Hugo Silva', folder: './5/' },
    { name: 'Joana Rita', folder: './6/' },
    { name: 'João Teixeira', folder: './7/' },
    { name: 'João Ladeira', folder: './8/' },
    { name: 'Keila Mendes', folder: './9/' },
    { name: 'Leonardo Melendre', folder: './10/' },
    { name: 'Lucas Diniz', folder: './11/' },
    { name: 'Marlon Silva', folder: './12/' },
    { name: 'Miguel Lourenço', folder: './13/' },
    { name: 'Ruben Magalhães', folder: './14/' },
    { name: 'Tomé Almeida', folder: './15/' },
    { name: 'Ygor Mendonça', folder: './16/' },
];

2. 更新搜索过滤逻辑

针对对象中的name属性进行过滤，保持补全功能正常：

inputBox.onkeyup = function (){
    let result = [];
    let input = inputBox.value;
    if (input.length) {
        result = availableKeywords.filter((item)=> {
            return item.name.toLowerCase().includes(input.toLowerCase());
        });
    }
    display(result);

    if (!result.length) {
        resultBox.innerHTML = '';
    }
}

3. 修改选项渲染，存储路径信息

生成选项时，用自定义属性存储对应文件夹路径：

function display(result){
    const content = result.map((item)=> {
        return `<li data-folder="${item.folder}" onclick="selectInput(this)">${item.name}</li>`;
    });

    resultBox.innerHTML = "<ul>" + content.join('') + "</ul>";
}

4. 实现点击跳转逻辑

在selectInput函数中读取路径并跳转：

function selectInput(list){
    const folderPath = list.getAttribute('data-folder');
    // 跳转到对应文件夹，若需新窗口打开则改用window.open(folderPath, '_blank')
    window.location.href = folderPath;
    resultBox.innerHTML = '';
}

完整修改后代码 #

JavaScript

let availableKeywords = [
    { name: 'Afonso Nabeto', folder: './1/' },
    { name: 'Bianca Silva', folder: './2/' },
    { name: 'Duarte Rocha', folder: './3/' },
    { name: 'Guilherme Costa', folder: './4/' },
    { name: 'Hugo Silva', folder: './5/' },
    { name: 'Joana Rita', folder: './6/' },
    { name: 'João Teixeira', folder: './7/' },
    { name: 'João Ladeira', folder: './8/' },
    { name: 'Keila Mendes', folder: './9/' },
    { name: 'Leonardo Melendre', folder: './10/' },
    { name: 'Lucas Diniz', folder: './11/' },
    { name: 'Marlon Silva', folder: './12/' },
    { name: 'Miguel Lourenço', folder: './13/' },
    { name: 'Ruben Magalhães', folder: './14/' },
    { name: 'Tomé Almeida', folder: './15/' },
    { name: 'Ygor Mendonça', folder: './16/' },
];

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

inputBox.onkeyup = function (){
    let result = [];
    let input = inputBox.value;
    if (input.length) {
        result = availableKeywords.filter((item)=> {
            return item.name.toLowerCase().includes(input.toLowerCase());
        });
    }
    display(result);

    if (!result.length) {
        resultBox.innerHTML = '';
    }
}

function display(result){
    const content = result.map((item)=> {
        return `<li data-folder="${item.folder}" onclick="selectInput(this)">${item.name}</li>`;
    });

    resultBox.innerHTML = "<ul>" + content.join('') + "</ul>";
}

function selectInput(list){
    const folderPath = list.getAttribute('data-folder');
    window.location.href = folderPath;
    resultBox.innerHTML = '';
}

CSS（保持原代码不变）

.search-box {
    width: 300px;
    margin: auto 0;
    border-radius: 15px;
    border: 2px solid var(--primary);
    background: var(--background);
    position: absolute;
    top: 20px;
}

.row {
    display: flex;
    align-items: center;
    padding: 5px 10px;
}  

input {
    flex: 1;
    height: 35px;
    background: transparent;
    border: 0;
    outline: 0;
    font-size: 15px;
    color: var(--primary);
}

button {
    background: transparent;
    border: 0;
    outline: 0;
}

button .fa-solid {
    width: 22px;
    color: var(--primary);
    font-size: 18px;
    cursor: pointer;
}

::placeholder {
    color: var(--primary);
}

.result-box ul {
    padding: 10px 5px;
    max-height: 75px;
}

.result-box li {
    list-style: none;
    font-size: 14px;
    border-radius: 3px;
    padding: 8px 10px;
    cursor: pointer;
    color: var(--primary);
}

.result-box ul li:hover {
    background: var(--static);
}

.result-box {
    max-height: 75px;
    overflow-y: scroll;
}

HTML（保持原代码不变）

<div class="search-box">
  <div class="row">
    <input type="text" id="input-box" placeholder="Pesquisar" autocomplete="off">
    <button><i class="fa-solid fa-magnifying-glass"></i></button>
  </div>
  <div class="result-box"></div>
</div>

注意事项 #

• 若文件夹路径不是当前页面的相对路径，需改为完整URL（如https://yourdomain.com/1/）
• 如需在新标签页打开跳转，替换window.location.href = folderPath;为window.open(folderPath, '_blank')

内容的提问来源于stack exchange，提问作者Tomé Almeida