如何为 JavaScript 自动补全下拉项绑定文件夹跳转链接-js教程-PHP中文网

如何为 JavaScript 自动补全下拉项绑定文件夹跳转链接

本文教你为 autocomplete 搜索框的每个候选词动态绑定对应文件夹（如 /folder1/ 至 /folder16/）的跳转链接，通过标签替代 onclick 事件实现点击即跳转，无需额外 JS 逻辑。

本文教你为 autocomplete 搜索框的每个候选词动态绑定对应文件夹（如 `/folder1/` 至 `/folder16/`）的跳转链接，通过 `` 标签替代 `onclick` 事件实现点击即跳转，无需额外 js 逻辑。

在当前代码中，搜索结果以 <li> 元素渲染，但仅绑定了空的 onclick=selectInput(this)，未触发任何导航行为。要让每个选项像按钮一样跳转到指定文件夹（例如第 1 个候选人对应 /folder1/，第 2 个对应 /folder2/……），关键在于：将关键词与预设文件夹序号建立映射关系，并在生成 HTML 时注入带路径的 <a href="https://www.php.cn/link/263b1243ca2dbeb358777ceabc4a2e4c"></a> 标签。

由于 availableKeywords 是静态数组，其索引（0-based）天然对应文件夹编号（1-based）。因此，可利用 result.map((list, index) => https://www.php.cn/link/263b1243ca2dbeb358777ceabc4a2e4c) 获取每个匹配项在原数组中的位置，再构造目标路径：

function display(result) {
    const content = result.map((list) => {
        // 查找该关键词在原始数组中的索引（确保顺序和映射准确）
        const idx = availableKeywords.indexOf(list);
        const folderNumber = idx + 1; // 转为 1-based 文件夹编号
        const folderPath = `/folder${folderNumber}/`; // 示例路径格式，可按需修改为 /folders/1/ 或 ./1/

        return `

${list}

`; }); resultBox.innerHTML = "

" + content.join('') + ""; }

✅ 优势说明：

Java Maven Code Review
审查Java Maven项目（ZIP压缩包或GitLab仓库URL），检查代码规范、命名、模块边界、可维护性问题以及重复代码。

下载

使用原生 <a></a> 标签，语义正确、支持右键新标签页打开、浏览器历史记录自动维护；

移除冗余的 selectInput() 函数及 onclick 内联事件，简化逻辑、提升可维护性；

target="_self" 确保在当前窗口跳转（默认行为，可省略；若需新页则用 "_blank"）。

⚠️ 注意事项：

若关键词存在重复或顺序可能变动，请改用对象映射（如 const keywordToFolder = { 'Afonso Nabeto': '/folder1/', 'Bianca Silva': '/folder2/' }）避免索引错位；
实际部署时，请确保 /folder1/ 等路径真实存在且服务器已配置对应路由或静态目录；
如需传递参数（如姓名），可扩展 URL：/folder${folderNumber}/?name=${encodeURIComponent(list)}；
建议为 <a></a> 添加 CSS 重置样式，避免默认下划线或颜色干扰 UI：

.result-box a {
    display: block;
    text-decoration: none;
    color: inherit;
    width: 100%;
    height: 100%;
}

最终效果：用户输入触发筛选 → 下拉列表显示匹配姓名 → 点击任一姓名 → 浏览器立即跳转至对应编号文件夹页面。整个流程零 JS 导航逻辑，轻量、可靠、符合 Web 标准。

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南