vue实现datalist

使用 Vue 实现 HTML5 的 datalist 功能

HTML5 的 <datalist> 元素提供了一种自动完成输入框的功能，允许用户在输入时从预定义的选项列表中选择。以下是几种在 Vue 中实现 datalist 功能的方法。

基本实现方式

在 Vue 模板中直接使用 <datalist> 元素，绑定输入框的 list 属性到 datalist 的 id。

<template>
  <div>
    <input type="text" list="suggestions" v-model="inputValue" />
    <datalist id="suggestions">
      <option v-for="item in items" :key="item" :value="item" />
    </datalist>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: '',
      items: ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry']
    }
  }
}
</script>

动态加载选项

通过 API 或异步操作动态加载 datalist 的选项。

<template>
  <div>
    <input type="text" list="dynamicSuggestions" v-model="query" @input="fetchSuggestions" />
    <datalist id="dynamicSuggestions">
      <option v-for="item in dynamicItems" :key="item" :value="item" />
    </datalist>
  </div>
</template>

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

使用第三方组件库

如果项目中使用 UI 组件库如 Element UI 或 Vuetify，可以利用它们提供的自动完成组件实现类似功能。

Element UI 示例：

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

<script>
export default {
  data() {
    return {
      inputValue: '',
      items: ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry']
    }
  },
  methods: {
    querySearch(queryString, cb) {
      const results = queryString
        ? this.items.filter(item => item.toLowerCase().includes(queryString.toLowerCase()))
        : this.items
      cb(results.map(item => ({ value: item })))
    }
  }
}
</script>

自定义自动完成组件

对于更复杂的需求，可以创建自定义的自动完成组件。

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

<script>
export default {
  props: {
    items: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      inputValue: '',
      showSuggestions: false,
      filteredItems: []
    }
  },
  methods: {
    onInput() {
      this.filteredItems = this.items.filter(item =>
        item.toLowerCase().includes(this.inputValue.toLowerCase())
      )
    },
    selectItem(item) {
      this.inputValue = item
      this.showSuggestions = false
    },
    hideSuggestions() {
      setTimeout(() => {
        this.showSuggestions = false
      }, 200)
    }
  }
}
</script>

样式优化

为自定义组件添加基本样式，提升用户体验。

.autocomplete {
  position: relative;
}

.autocomplete ul {
  position: absolute;
  z-index: 1000;
  width: 100%;
  max-height: 200px;
  overflow-y: auto;
  list-style: none;
  padding: 0;
  margin: 0;
  border: 1px solid #ddd;
  background: white;
}

.autocomplete li {
  padding: 8px 12px;
  cursor: pointer;
}

.autocomplete li:hover {
  background-color: #f5f5f5;
}

以上方法涵盖了从简单的原生实现到复杂的自定义组件解决方案，可以根据项目需求选择最适合的方式。