下圖為官方代碼，主要部分我寫了一些注解
elementUI官方代碼展示：
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link
rel="stylesheet"
href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" target="_blank" rel="external nofollow"
/>
</head>
<body>
<div id="app">
<el-autocomplete
v-model="state1"
placeholder="請輸入内容"
:fetch-suggestions="querySearch"//el内置方法，調取建議輸入清單
></el-autocomplete>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
let vm = new Vue({
el: "#app",
data: {
state1: "",
restaurants: [],
},
methods: {
loadAll() {
return [
{ value: "三全鮮食（北新泾店）", address: "長甯區新漁路144号" },
{
value: "Hot honey 首爾炸雞（仙霞路）",
address: "上海市長甯區淞虹路661号",
},
{
value: "新旺角茶餐廳",
address: "上海市普陀區真北路988号創邑金沙谷6号樓113",
},
{ value: "泷千家(天山西路店)", address: "天山西路438号" },
{
value: "胖仙女紙杯蛋糕（上海淩空店）",
address: "上海市長甯區金鐘路968号1幢18号樓一層商鋪18-101",
},
{ value: "貢茶", address: "上海市長甯區金鐘路633号" },
{
value: "豪大大香雞排超級奶爸",
address: "上海市嘉定區曹安公路曹安路1685号",
},
{
value: "茶芝蘭（奶茶，手抓餅）",
address: "上海市普陀區同普路1435号",
},
{ value: "十二泷町", address: "上海市北翟路1444弄81号B幢-107" },
{ value: "星移濃縮咖啡", address: "上海市嘉定區新郁路817号" },
{ value: "阿姨奶茶/豪大大", address: "嘉定區曹安路1611号" },
{
value: "新麥甜四季甜品炸雞",
address: "嘉定區曹安公路2383弄55号",
},
{
value: "Monica摩托主題咖啡店",
address: "嘉定區江橋鎮曹安公路2409号1F，2383弄62号1F",
},
{
value: "浮生若茶（淩空soho店）",
address: "上海長甯區金鐘路968号9号樓地下一層",
},
{
value: "NONO JUICE 鮮榨果汁",
address: "上海市長甯區天山西路119号",
},
{ value: "CoCo都可(北新泾店）", address: "上海市長甯區仙霞西路" },
{
value: "快樂檸檬（神州智慧店）",
address: "上海市長甯區天山西路567号1層R117号店鋪",
},
{
value: "Merci Paul cafe",
address: "上海市普陀區光複西路丹巴路28弄6号樓819",
},
{
value: "貓山王（西郊百聯店）",
address: "上海市長甯區仙霞西路88号第一層G05-F01-1-306",
},
{ value: "槍會山", address: "上海市普陀區棕榈路" },
{ value: "縱食", address: "元豐天山花園(東門) 雙流路267号" },
{ value: "錢記", address: "上海市長甯區天山西路" },
{ value: "壹杯加", address: "上海市長甯區通協路" },
{
value: "唦哇嘀咖",
address:
"上海市長甯區新泾鎮金鐘路999号2幢（B幢）第01層第1-02A單元",
},
{
value: "愛茜茜裡(西郊百聯)",
address: "長甯區仙霞西路88号1305室",
},
{
value: "愛茜茜裡(近鐵廣場)",
address:
"上海市普陀區真北路818号近鐵城市廣場北區地下二樓N-B2-O2-C商鋪",
},
{
value: "鮮果榨汁（金沙江路和美廣店）",
address: "普陀區金沙江路2239号金沙和美廣場B1-10-6",
},
{
value: "開心麗果（缤谷店）",
address: "上海市長甯區威甯路天山路341号",
},
{
value: "超級雞車（豐莊路店）",
address: "上海市嘉定區豐莊路240号",
},
{ value: "妙生活果園（北新泾店）", address: "長甯區新漁路144号" },
{ value: "香宜度麻辣香鍋", address: "長甯區淞虹路148号" },
{
value: "凡仔漢堡（老真北路店）",
address: "上海市普陀區老真北路160号",
},
{
value: "港式小鋪",
address: "上海市長甯區金鐘路968号15樓15-105室",
},
{ value: "蜀香源麻辣香鍋（劍河路店）", address: "劍河路443-1" },
{
value: "北京餃子館",
address: "長甯區北新泾街道天山西路490-1号",
},
{
value: "飯典*新簡餐（淩空SOHO店）",
address: "上海市長甯區金鐘路968号9号樓地下一層9-83室",
},
{
value: "焦耳·川式快餐（金鐘路店）",
address: "上海市金鐘路633号地下一層甲部",
},
{ value: "動力雞車", address: "長甯區仙霞西路299弄3号101B" },
{ value: "浏陽蒸菜", address: "天山西路430号" },
{
value: "四海遊龍（天山西路店）",
address: "上海市長甯區天山西路",
},
{
value: "櫻花食堂（淩空店）",
address: "上海市長甯區金鐘路968号15樓15-105室",
},
{
value: "壹分米客家傳統調制米粉(天山店)",
address: "天山西路428号",
},
{
value: "福榮祥燒臘（平溪路店）",
address: "上海市長甯區協和路福泉路255弄57-73号",
},
{
value: "速記黃焖雞米飯",
address: "上海市長甯區北新泾街道金鐘路180号1層01号攤位",
},
{ value: "紅辣椒麻辣燙", address: "上海市長甯區天山西路492号" },
{
value: "(小楊生煎)西郊百聯餐廳",
address: "長甯區仙霞西路88号百聯2樓",
},
{ value: "陽陽麻辣燙", address: "天山西路389号" },
{
value: "南拳媽媽龍蝦蓋澆飯",
address: "普陀區金沙江路1699号鑫樂惠美食廣場A13",
},
];
},
// queryString 是輸入框裡的内容
querySearch(queryString, callBack) {
let restaurants = this.restaurants;
// 要展示的建議清單，輸入框為空就是展示所有建議清單，有比對就展示比對的内容
// filter(function(item,index,arr))
// filter方法裡面的參數是函數
let results = queryString
? this.restaurants.filter(this.createFilter(queryString))
: restaurants;
callBack(results);
},
// createFilter傳回的是一個函數
createFilter(queryString) {
return (restaurant) => {
// 輸入框裡輸入的内容與建議清單有比對的話，就是true，逐級傳回
return (
restaurant.value
.toLowerCase()
.indexOf(queryString.toLowerCase()) === 0
);
};
},
},
mounted() {
this.restaurants = this.loadAll();
},
});
</script>
</body>
</html>
![nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)