如何在用户选择autocomplete自动完成建议时触发数据加载？

根据你使用的自动完成实现方式，有三类可直接落地的方案：

方案1：自定义实现的自动完成组件 #

直接监听联想候选项的选中动作即可，不需要依赖输入框的原生事件：

• 给每个候选DOM节点绑定click（移动端可补充touchend做兼容）事件，用户点击选中候选时，直接在回调中获取选中值执行数据加载逻辑。
• 如果支持键盘上下键切换候选、回车选中的交互，额外给输入框绑定keydown事件，监听回车/空格选中候选的动作，触发对应逻辑。

方案2：使用原生<datalist>实现的自动完成 #

原生datalist选中选项时会触发输入框的input事件，可通过防抖逻辑避免输入过程中实时触发：

let searchTimer = null
$('input').on('input', function() {
  clearTimeout(searchTimer)
  // 延迟时长可根据业务需求调整，建议设置200~500ms
  searchTimer = setTimeout(() => {
    const keyword = $(this).val().trim()
    if(keyword) {
      // 此处写入你的数据加载逻辑
    }
  }, 300)
})

该逻辑下用户连续输入时不会频繁触发请求，只有停止输入300ms、或者选中datalist选项后才会执行加载，完全匹配你的需求。

方案3：使用第三方UI库的自动完成组件 #

主流UI库的自动完成组件都提供了专门的选中回调事件，直接绑定该事件即可：

• Element UI 可绑定@select事件
• Ant Design 可绑定onSelect事件
• jQuery UI Autocomplete 可绑定select配置项回调

示例（Element UI 写法）：

<el-autocomplete
  v-model="inputValue"
  :fetch-suggestions="querySearch"
  @select="handleSelect"
></el-autocomplete>

function handleSelect(selectedItem) {
  // 此处写入你的数据加载逻辑
}

内容的提问来源于stack exchange，提问作者Lemon