当前位置：首页 > VUE

vue实现datalist

2026-02-10 09:00:05VUE

Vue 实现 datalist 功能

在 Vue 中实现 HTML5 的 datalist 功能可以通过结合 <input> 和 <datalist> 元素完成。datalist 用于提供输入框的自动补全选项，但需要手动绑定数据。

基本实现方式

创建一个 Vue 组件，将数据列表绑定到 datalist 的 id 属性，并通过 v-model 监听输入值：

<template>
  <div>
    <input 
      type="text" 
      list="suggestions" 
      v-model="inputValue" 
      placeholder="输入搜索内容"
    >
    <datalist id="suggestions">
      <option 
        v-for="(item, index) in items" 
        :key="index" 
        :value="item"
      >
    </datalist>
  </div>
</template>

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

动态加载数据

若需根据输入动态加载数据，可以通过监听 input 事件并调用接口：

<template>
  <div>
    <input 
      type="text" 
      list="dynamicSuggestions" 
      v-model="inputValue" 
      @input="fetchSuggestions"
      placeholder="输入关键词"
    >
    <datalist id="dynamicSuggestions">
      <option 
        v-for="(item, index) in dynamicItems" 
        :key="index" 
        :value="item.name"
      >
    </datalist>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: '',
      dynamicItems: []
    };
  },
  methods: {
    async fetchSuggestions() {
      if (this.inputValue.length < 2) return;
      const response = await fetch(`/api/suggestions?q=${this.inputValue}`);
      this.dynamicItems = await response.json();
    }
  }
};
</script>

样式优化

默认的 datalist 下拉样式受限，可通过自定义下拉菜单增强体验：

<template>
  <div class="custom-datalist">
    <input 
      type="text" 
      v-model="inputValue" 
      @focus="showSuggestions = true"
      @blur="hideSuggestions"
    >
    <ul v-if="showSuggestions && filteredItems.length">
      <li 
        v-for="(item, index) in filteredItems" 
        :key="index" 
        @mousedown="selectItem(item)"
      >
        {{ item }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: '',
      showSuggestions: false,
      items: ['Vue', 'React', 'Angular', 'Svelte']
    };
  },
  computed: {
    filteredItems() {
      return this.items.filter(item => 
        item.toLowerCase().includes(this.inputValue.toLowerCase())
      );
    }
  },
  methods: {
    selectItem(item) {
      this.inputValue = item;
      this.showSuggestions = false;
    },
    hideSuggestions() {
      setTimeout(() => {
        this.showSuggestions = false;
      }, 200);
    }
  }
};
</script>

<style>
.custom-datalist {
  position: relative;
}
.custom-datalist ul {
  position: absolute;
  width: 100%;
  border: 1px solid #ddd;
  max-height: 200px;
  overflow-y: auto;
  background: white;
  list-style: none;
  padding: 0;
  margin: 0;
}
.custom-datalist li {
  padding: 8px;
  cursor: pointer;
}
.custom-datalist li:hover {
  background: #f0f0f0;
}
</style>