如何在MaterialUI <Autocomplete />中按回车时不提交hover的建议项

核心思路 #

要避免仅hover的建议项被回车提交，关键是区分“鼠标hover高亮”和“键盘选中高亮”两种状态：仅当建议项处于“键盘选中”状态时，回车才会提交该选项；鼠标hover仅改变视觉样式，不触发选中逻辑。同时保留点击建议项、输入内容后回车提交的默认行为。

具体实现步骤 #

1. 分离状态跟踪
   给建议列表项分别设置hoverIndex（仅控制视觉高亮）和selectedIndex（跟踪键盘选中的项），两者状态独立，鼠标hover只更新hoverIndex，仅通过键盘上下箭头切换selectedIndex。

2. 拦截回车提交逻辑
   在输入框的回车事件处理中，判断当前是否有处于selectedIndex状态的项：

   • 若有，提交该选中项；
   • 若无，提交输入框当前内容；
   • 完全忽略仅hover的项。

3. 示例代码片段（以Vue3为例）

<template>
  <div class="autocomplete-container">
    <input
      ref="inputRef"
      v-model="inputValue"
      @keyup.enter="handleEnter"
      @keyup.up="handleKeyUp"
      @keyup.down="handleKeyDown"
      @click="showSuggestions = true"
    />
    <ul v-if="showSuggestions" class="suggestions-list">
      <li
        v-for="(item, index) in suggestions"
        :key="item.id"
        :class="{ 'hovered': hoverIndex === index, 'selected': selectedIndex === index }"
        @mouseenter="hoverIndex = index"
        @click="handleSelectItem(item)"
      >
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const inputValue = ref('')
const showSuggestions = ref(false)
const suggestions = ref([
  { id: 1, name: 'Pulp Fiction' },
  { id: 2, name: 'Inception' },
  { id: 3, name: 'The Shawshank Redemption' }
])
const hoverIndex = ref(-1)
const selectedIndex = ref(-1)

const handleKeyUp = () => {
  selectedIndex.value = Math.max(selectedIndex.value - 1, -1)
  showSuggestions.value = true
}

const handleKeyDown = () => {
  selectedIndex.value = Math.min(selectedIndex.value + 1, suggestions.value.length - 1)
  showSuggestions.value = true
}

const handleSelectItem = (item) => {
  inputValue.value = item.name
  showSuggestions.value = false
  // 替换为你的提交逻辑
  console.log('提交内容:', item.name)
}

const handleEnter = () => {
  if (selectedIndex.value !== -1) {
    handleSelectItem(suggestions.value[selectedIndex.value])
  } else {
    // 提交输入框当前内容
    console.log('提交内容:', inputValue.value)
    showSuggestions.value = false
  }
}
</script>

<style scoped>
.autocomplete-container {
  position: relative;
  width: 300px;
}
input {
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
}
.suggestions-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border: 1px solid #eee;
  position: absolute;
  width: 100%;
  top: 100%;
  left: 0;
  background: white;
}
.suggestions-list li {
  padding: 8px;
  cursor: pointer;
}
.hovered {
  background-color: #f5f5f5; /* 仅视觉标记hover项 */
}
.selected {
  background-color: #2196f3; /* 键盘选中项的高亮样式 */
  color: white;
}
</style>

关键说明 #

• 视觉上区分hover和选中状态，用户能清晰感知当前操作对象；
• 回车事件仅响应键盘选中的项，彻底避免hover误提交；
• 完全保留点击建议项、输入内容回车提交的原有逻辑。

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