Vue自动完成组件：解决输入框失焦隐藏建议列表与点击建议项的事件冲突问题

嘿，我完全懂你这个烦恼！输入框的blur事件总是抢在建议项的click前面触发，刚点下去列表就没了，用setTimeout又怕出现闪烁或者延迟的尴尬情况。这里有几个更稳妥的Vue专属解决方案，你可以试试看：

方案一：改用mousedown事件+阻止默认行为（最直接） #

浏览器的事件触发顺序是mousedown → blur → mouseup → click，所以我们可以把建议项的点击事件换成mousedown，同时阻止它的默认行为，这样就能避免输入框提前失焦。

修改模板部分： #

把原有的@click替换成@mousedown.prevent：

<li v-for="(suggestion, suggestion_index) in matches" 
    v-bind:class="{'active': isActive(suggestion_index)}"
    @mousedown.prevent="suggestionClick(suggestion_index)">
  {{ suggestion }}
</li>

修改suggestionClick方法： #

完成选中逻辑后，我们可以主动控制输入框失焦和列表关闭：

suggestionClick(index) {
    this.currentText = this.matches[index];
    console.log("Clicked suggestion: ", index, this.matches[index]);
    // 主动让输入框失焦
    this.$refs.inputField.blur();
    this.open = false;
}

这样一来，mousedown事件会先执行选中逻辑，preventDefault阻止了输入框的失焦行为，等我们处理完所有逻辑后再手动关闭列表，完美避开事件顺序冲突。

方案二：全局点击监听（适合需要更灵活控制的场景） #

如果还是想保留click事件，可以通过监听全局点击来判断是否要关闭列表，同时去掉输入框的blur事件：

在组件的生命周期钩子中添加监听： #

mounted() {
    this.fieldWidth = this.$refs.inputField.clientWidth;
    // 定义全局点击处理函数
    this.globalClickHandler = (e) => {
        // 判断点击目标是否在组件内部
        const isInsideComponent = this.$el.contains(e.target);
        if (!isInsideComponent) {
            this.open = false;
        }
    };
    window.addEventListener('click', this.globalClickHandler);
},
beforeUnmount() {
    // 组件销毁时移除监听，防止内存泄漏
    window.removeEventListener('click', this.globalClickHandler);
}

移除输入框的blur绑定： #

把模板里的@blur="blur"删掉，然后在suggestionClick方法里手动关闭列表：

suggestionClick(index) {
    this.currentText = this.matches[index];
    console.log("Clicked suggestion: ", index, this.matches[index]);
    this.open = false;
}

这样点击建议项时，因为目标在组件内部，全局监听不会触发关闭逻辑，click事件能正常执行；点击组件外部时才会关闭列表，逻辑更清晰。

方案三：利用状态标记+nextTick（兼容原有逻辑的小改动） #

如果不想大改现有代码，可以通过标记状态来延迟blur的关闭动作：

在data中添加状态： #

data()  {
    return {
        open: false,
        current: 0,
        /** @type {string[]} **/
        suggestions: ["first", "ble", "hello"],
        fieldWidth: 0,
        isClickingSuggestion: false // 新增状态标记
    }
},

修改模板的建议项绑定： #

<li v-for="(suggestion, suggestion_index) in matches" 
    v-bind:class="{'active': isActive(suggestion_index)}"
    @mousedown="isClickingSuggestion = true"
    @mouseup="suggestionClick(suggestion_index)"
    @mouseleave="isClickingSuggestion = false">
  {{ suggestion }}
</li>

修改blur方法： #

blur() {
    console.log("Focus deactivated");
    // 如果正在点击建议项，等事件循环走完再关闭
    if (this.isClickingSuggestion) {
        this.$nextTick(() => {
            this.open = false;
            this.isClickingSuggestion = false;
        });
    } else {
        this.open = false;
    }
}

这个方法利用mousedown先标记“正在点击建议项”，blur时判断状态，用$nextTick等待click事件执行完毕后再关闭列表，也能解决冲突问题。

个人最推荐方案一，因为它直接利用浏览器的事件触发顺序解决问题，代码改动最小，逻辑也最直观，不会引入额外的全局监听或者状态标记。

备注：内容来源于stack exchange，提问作者Tomáš Zato