如何为Bootstrap5 Autocomplete自动补全列表添加href链接跳转功能

架构老林

2026-8-27

Bootstrap 5 Autocomplete 选中项跳转实现方案

你当前使用的插件已经预留了选中项的回调钩子onSelectItem，不需要额外修改插件源码，直接在回调中加入跳转逻辑即可实现需求。

基础实现（点击选项直接跳转）

直接修改原有onSelectItem配置项，替换原有console输出逻辑为页面跳转代码，完整代码如下：

<script>
var datasrc = [
  {label: 'About', value: 'about.html'},
  {label: 'Components', value: 'components.html'},
  {label: 'Usage', value: 'usage.html'},
]
const ac = new Autocomplete(document.getElementById('autosuggest'), {
  data: datasrc,
  treshold: 1,
  maximumItems: 8,
  onSelectItem: ({label, value}) => {
    // 当前页跳转
    window.location.href = value;
    // 若需要新标签页打开，替换为下方代码即可
    // window.open(value, '_blank');
  }
});
</script>

进阶优化（下拉项渲染为可右键操作的链接）

如果需要让下拉建议项具备原生链接的交互特性（鼠标悬浮显示手型、支持右键菜单选择新开标签/复制链接地址），可以使用插件自带的customRender配置自定义渲染列表项为<a>标签：

const ac = new Autocomplete(document.getElementById('autosuggest'), {
  data: datasrc,
  treshold: 1,
  maximumItems: 8,
  // 自定义渲染下拉项为a标签
  customRender: (item) => {
    return `<li><a class="dropdown-item" href="${item.value}">${item.label}</a></li>`
  },
  onSelectItem: ({label, value}) => {
    window.location.href = value;
  }
});