Vue Element Autocomplete 自动补全

autocomplete(自动补全)



1、testauto.vue 文件

<template>
  <div class="login-container">
    <el-form class="login-form">
      <el-form-item>
        <el-autocomplete class="inline-input" v-model="state1" :fetch-suggestions="querySearch" placeholder="请输入内容" @select="handleSelect"></el-autocomplete>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getAuto } from "@/api/user";

export default {
  name: "Login",
  data() {
    return {
      state1: "",
      autoQuery: {
        page: 1,
        per_page: 10,
        user_name: "",
      },
    };
  },
  methods: {
    querySearch(queryString, cb) {
      this.autoQuery.user_name = queryString;
      const res = getAuto(this.autoQuery).then((res) => {
        for (let i of res.data) {
          i.value = i.user_name;
        }
        cb(res.data);
      });
    },
    handleSelect(item) {
      console.log(item);
    },
  },
};
</script>

<style lang="scss">

$bg: #283443;
$light_gray: #fff;
$cursor: #fff;

@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
  .login-container .el-input input {
    color: $cursor;
  }
}

/* reset element-ui css */
.login-container {
  .el-input {
    display: inline-block;
    height: 47px;
    //width: 85%;

    input {
      background: transparent;
      border: 0px;
      -webkit-appearance: none;
      border-radius: 0px;
      padding: 12px 5px 12px 15px;
      color: $light_gray;
      height: 47px;
      caret-color: $cursor;

      &:-webkit-autofill {
        box-shadow: 0 0 0px 1000px $bg inset !important;
        -webkit-text-fill-color: $cursor !important;
      }
    }
  }

  .el-autocomplete {
    width: 100%;
  }

  .el-form-item {
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    color: #454545;
  }
}
</style>

<style lang="scss" scoped>
$bg: #2d3a4b;
$dark_gray: #889aa4;
$light_gray: #eee;

.login-container {
  min-height: 100%;
  width: 100%;
  background-color: $bg;
  overflow: hidden;

  .login-form {
    position: relative;
    width: 520px;
    max-width: 100%;
    padding: 160px 35px 0;
    margin: 0 auto;
    overflow: hidden;
  }

}
</style>

2、user.js 文件

import request from '@/utils/request'

export function getAuto(query) {
  return request({
    url: '/v1/users/auto',
    method: 'get',
    params: query
  })
}

3、api 接口
Url: http://localhost:60548/api/v1/users/auto?page=1&per_page=10&user_name=
Method: GET
Response:

{
  "data": [
    {
      "user_code": 1,
      "user_name": "huatuo",
      "real_name": "华佗"
    },
    {
      "user_code": 2,
      "user_name": "admin888",
      "real_name": "admin666"
    },
    {
      "user_code": 3,
      "user_name": "admin777",
      "real_name": "admin666"
    }
  ],
  "code": "200",
  "msg": null
}

*
*