Vue项目中如何为输入框设置自定义默认自动补全词列表？

一、为什么设置id为autocompleteInput会出现历史输入提示？ #

这和id名称完全无关，是浏览器的默认自动填充/历史记录功能在起作用。不管input的id是什么，只要是普通文本输入框，浏览器都会默认记录用户之前输入过的内容，当输入框聚焦时就会弹出历史提示列表。你只是刚好在设置这个id后注意到了这个现象，本质和id没有关联。

如果想禁用浏览器的历史提示，可以给input添加autocomplete="off"属性：

<input id="autocompleteInput" autocomplete="off" />

二、实现自定义词列表的自动补全 #

这里提供两种常用方案，根据你的需求选择：

方案1：用原生HTML datalist（简单快捷） #

利用浏览器原生的<datalist>标签，不需要额外写复杂逻辑，适合简单场景：

<template>
  <input
    id="autocompleteInput"
    list="countryList"
    autocomplete="off" <!-- 禁用浏览器历史提示，只显示自定义列表 -->
  />
  <!-- 绑定自定义列表的datalist -->
  <datalist id="countryList">
    <option v-for="country in customCountries" :key="country" :value="country">
      {{ country }}
    </option>
  </datalist>
</template>

<script setup>
// 自定义补全词列表
const customCountries = ["Germany", "France", "Spain"];
</script>

优点：零额外代码，浏览器原生支持；缺点：样式受浏览器限制，自定义程度低。

方案2：Vue自定义组件（高度可定制） #

如果需要自定义样式、交互逻辑（比如实时过滤、hover效果），可以自己实现一个补全组件：

<template>
  <div class="autocomplete-wrap">
    <input
      id="autocompleteInput"
      v-model="inputVal"
      @input="filterOptions"
      @focus="showDropdown = true"
      @blur="hideDropdownDelay"
      autocomplete="off"
    />
    <!-- 自定义下拉补全列表 -->
    <ul v-if="showDropdown && filteredCountries.length" class="autocomplete-list">
      <li 
        v-for="country in filteredCountries" 
        :key="country"
        @click="selectCountry(country)"
        class="list-item"
      >
        {{ country }}
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';

const inputVal = ref('');
const customCountries = ["Germany", "France", "Spain"];
const showDropdown = ref(false);

// 实时过滤匹配的选项
const filteredCountries = computed(() => {
  if (!inputVal.value) return customCountries;
  return customCountries.filter(country => 
    country.toLowerCase().includes(inputVal.value.toLowerCase())
  );
});

const filterOptions = () => {
  showDropdown.value = true;
};

// 延迟隐藏下拉，避免点击选项时直接关闭
const hideDropdownDelay = () => {
  setTimeout(() => showDropdown.value = false, 200);
};

// 选中选项填充到输入框
const selectCountry = (country) => {
  inputVal.value = country;
  showDropdown.value = false;
};
</script>

<style scoped>
.autocomplete-wrap {
  position: relative;
  width: 220px;
}

.autocomplete-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin: 0;
  padding: 0;
  border: 1px solid #e5e7eb;
  border-top: none;
  background: #fff;
  list-style: none;
  z-index: 10;
}

.list-item {
  padding: 8px 12px;
  cursor: pointer;
}

.list-item:hover {
  background-color: #f3f4f6;
}
</style>

优点：完全自定义样式和交互逻辑，适配各种需求；缺点：需要自己编写组件代码。

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