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
}
*
*