当前位置：首页 > VUE

vue实现datalist

2026-01-13 01:41:04VUE

Vue 实现 datalist 功能

在 Vue 中实现类似 HTML5 <datalist> 的功能，可以通过自定义组件或结合现有库完成。以下是几种常见方法：

使用原生 HTML5 datalist

Vue 支持直接使用原生 HTML5 的 <datalist> 元素，通过 v-model 绑定输入框的值：

<template>
  <div>
    <input list="suggestions" v-model="selectedItem" placeholder="输入搜索内容" />
    <datalist id="suggestions">
      <option v-for="item in items" :key="item" :value="item" />
    </datalist>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedItem: '',
      items: ['选项1', '选项2', '选项3', '选项4']
    }
  }
}
</script>

使用第三方组件库

如果需要更丰富的功能（如异步加载、样式定制），可以使用第三方组件库：

Element UI 的 el-autocomplete
Vuetify 的 v-autocomplete
Ant Design Vue 的 a-select

以 Element UI 为例：

<template>
  <el-autocomplete
    v-model="selectedItem"
    :fetch-suggestions="querySearch"
    placeholder="输入搜索内容"
  />
</template>

<script>
export default {
  data() {
    return {
      selectedItem: '',
      items: ['选项1', '选项2', '选项3']
    }
  },
  methods: {
    querySearch(queryString, cb) {
      const results = queryString
        ? this.items.filter(item => item.includes(queryString))
        : this.items
      cb(results)
    }
  }
}
</script>

自定义实现

如果需要完全自定义逻辑，可以结合 v-model 和事件监听：

<template>
  <div>
    <input
      v-model="inputValue"
      @input="handleInput"
      @focus="showSuggestions = true"
    />
    <ul v-if="showSuggestions && filteredItems.length">
      <li
        v-for="item in filteredItems"
        :key="item"
        @click="selectItem(item)"
      >
        {{ item }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: '',
      showSuggestions: false,
      items: ['选项1', '选项2', '选项3'],
      filteredItems: []
    }
  },
  methods: {
    handleInput() {
      this.filteredItems = this.items.filter(item =>
        item.includes(this.inputValue)
      )
    },
    selectItem(item) {
      this.inputValue = item
      this.showSuggestions = false
    }
  }
}
</script>