element autocomplete

最新推荐文章于 2025-09-25 00:04:04 发布

原创最新推荐文章于 2025-09-25 00:04:04 发布 · 393 阅读

0 ·

CC 4.0 BY-SA版权

element 专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何使用 Vue 和 Element UI 实现一个带有动态搜索功能的自动完成输入框，通过`v-model`双向数据绑定和`fetch-suggestions`获取数据，以及`handleSelect`处理选中事件。

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.15.0/lib/index.js"></script>
<div id="app">
    <el-autocomplete
      class="inline-input"
      v-model="selectedItem.value"
      :fetch-suggestions="querySearch"
      placeholder="请输入内容"
      @select="handleSelect"
    ></el-autocomplete>
</div>

const listOptions =  [{ "value": "测试1", "id": "1" },
          { "value": "测试2", "id": "2" },
          { "value": "测试3", "id": "3" }]; 

var Main = {
    data() {
      return {
        list: listOptions,
        selectedItem: { "value": "测试2", "id": "2" },
      };
    },
    methods: {
      querySearch(queryString, cb) {
        var list = this.list;
        var results = queryString ? list.filter(this.createFilter(queryString)) : list;
        // 调用 callback 返回建议列表的数据
        cb(results);
      },
      createFilter(queryString) {
        return (list) => {
          return (list.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      },
      handleSelect(item) {
        alert(JSON.stringify(item));
      }
    },
    mounted() {
      
    }
  }
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')