Vue手动实现AutoComplete组件点击选项失效问题求助

你遇到的问题是浏览器事件触发顺序导致的：blur 事件会在 click 之前执行，所以点击列表按钮时，输入框失焦先隐藏了列表，按钮的点击逻辑根本没机会执行。下面提供三种可行的解决方案：

方案一：用定时器延迟隐藏，点击时清除定时器 #

核心思路是给 blur 的隐藏逻辑加一个短暂延迟，让 click 事件有足够时间执行，同时在按钮点击时清除这个定时器，避免误隐藏。

修改组件代码：

<template>
  <div class="autocomplete-container">
    <input
      v-model="inputVal"
      @input="fetchOptions"
      @blur="handleBlur"
      placeholder="输入搜索内容"
    >
    <ul v-if="options.length" class="options-list">
      <li v-for="item in options" :key="item.id">
        <button @click="fillInput(item)">{{ item.label }}</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputVal: '',
      options: [],
      blurTimer: null // 存储定时器ID
    }
  },
  methods: {
    async fetchOptions() {
      // 模拟从服务器获取数据
      const res = await fetch(`/api/search?keyword=${this.inputVal}`);
      this.options = await res.json();
    },
    handleBlur() {
      // 延迟100ms隐藏列表
      this.blurTimer = setTimeout(() => {
        this.options = [];
      }, 100);
    },
    fillInput(item) {
      // 清除定时器，阻止列表隐藏
      clearTimeout(this.blurTimer);
      this.inputVal = item.value;
      // 填充后手动隐藏列表
      this.options = [];
    }
  }
}
</script>

方案二：用mousedown替代click事件 #

浏览器事件触发顺序是：mousedown → blur → mouseup → click，所以把按钮的click换成mousedown，就能让填充逻辑在blur之前执行。

修改按钮的事件绑定：

<button @mousedown="fillInput(item)">{{ item.label }}</button>

对应的方法无需额外修改，正常执行填充逻辑即可：

fillInput(item) {
  this.inputVal = item.value;
  this.options = [];
}

这种方式更直接，没有定时器的延迟，但要注意mousedown会在用户按下鼠标时就触发，若有特殊交互场景可能需要调整。

方案三：监听全局点击，点击外部才隐藏列表 #

放弃依赖blur事件，改为监听document的点击事件，判断点击目标是否在组件内部，只有点击外部时才隐藏自动完成列表。这是最健壮的实现方式，也是多数UI组件库的通用方案。

修改组件代码：

<template>
  <div class="autocomplete-container" ref="autocomplete">
    <input
      v-model="inputVal"
      @input="fetchOptions"
      placeholder="输入搜索内容"
    >
    <ul v-if="options.length" class="options-list">
      <li v-for="item in options" :key="item.id">
        <button @click="fillInput(item)">{{ item.label }}</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputVal: '',
      options: []
    }
  },
  mounted() {
    // 绑定全局点击事件
    document.addEventListener('click', this.handleOutsideClick);
  },
  beforeUnmount() {
    // 组件销毁前移除事件监听，防止内存泄漏
    document.removeEventListener('click', this.handleOutsideClick);
  },
  methods: {
    async fetchOptions() {
      const res = await fetch(`/api/search?keyword=${this.inputVal}`);
      this.options = await res.json();
    },
    fillInput(item) {
      this.inputVal = item.value;
      this.options = [];
    },
    handleOutsideClick(e) {
      // 判断点击目标是否在组件内部
      const isInside = this.$refs.autocomplete.contains(e.target);
      if (!isInside) {
        this.options = [];
      }
    }
  }
}
</script>

推荐优先使用方案三，它能避免各种事件顺序带来的边界问题，交互逻辑更清晰。

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