Element-ui输入框自动查询实现

最新推荐文章于 2025-03-13 18:08:39 发布

原创最新推荐文章于 2025-03-13 18:08:39 发布 · 1.1k 阅读

4 ·

CC 4.0 BY-SA版权

Vue 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一个基于 Vue 的自动完成输入组件实现方法。通过使用 axios 发送 GET 请求到指定 API 地址来获取建议列表，并实现了过滤和选择功能。文章详细展示了如何使用 el-autocomplete 组件，并提供了完整的代码示例。

<template>
  <el-autocomplete
          v-model="input"
          :fetch-suggestions="querySearch"
          placeholder="请输入内容"
          :trigger-on-focus="false"
          prefix-icon="el-icon-search"
          @select="handleSelect"
  ></el-autocomplete>
</template>

<script>
  const api = 'https://www.xxx.com/api';
  
  export default {
    name: 'ComponentName',
    data() {
      return {
        input: '',
      };
    },
    methods: {
      querySearch(queryString, cb) {
        axios({
          method: 'get',
          url: api,
        })
                .then((response) => {
                  let restaurants = response.data.data;
                  let results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
                  cb(results);
                })
                .catch((error) => {
                  console.log(error);
                });
      },
      createFilter(queryString) {
        return (restaurant) => {
          return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      },
      handleSelect(item) {
        console.log(item);
      }
    },
  }
</script>