<template>
<div>
<el-autocomplete
v-model="state"
:fetch-suggestions="querySearchAsync"
placeholder="請輸入內容"
@select="handleSelect"
></el-autocomplete>
</div>
</template>
<script>
export default {
data() {
return {
restaurants: [],
state: "何",
timeout: null,
from: {
keyword: "",
size: 99999,
page: 1,
},
};
},
methods: {
querySearchAsync(queryString, cb) {
if (!queryString) {
cb([]);
return;
}
this.from.keyword = queryString;
var restaurants = [];
this.$url.MUrl("userAdminGetPageList", this.from).then((e) => {
if (e.status == 200) {
e.data.list.forEach((item) => {
item.value =
item.name +
(item.realName ? "( " + item.realName + " )" : "") +
" - " +
item.phone;
item.value1 = item.realName + item.phone + item.name;
});
restaurants = e.data.list;
var results = queryString
? restaurants.filter(this.createStateFilter(queryString))
: restaurants;
cb(results);
}
});
},
// 過濾出state.value中包含queryString的記錄
createStateFilter(queryString) {
return (state) => {
return (
state.value1.toLowerCase().indexOf(queryString.toLowerCase()) != -1
);
};
},
handleSelect(item) {
console.log(item);
},
},
};
</script>
