Auto Complete Vue是一個基于Vue.js和Element框架的自動完成組件。它允許用戶在一個文本輸入框中輸入一些字符，然后從匹配的列表中選擇一個正確的選項。這個功能通常用于Web應用程序中，以提高用戶體驗和準確性。

<template>
<div>
<el-autocomplete
v-model="value"
:fetch-suggestions="querySearchAsync"
placeholder="請輸入內容"
@select="handleSelect">
<template slot-scope="{ item }">
<div class="name">
{{ item.value }}
</div>
</template>
</el-autocomplete>
</div>
</template>
<script>
export default {
data() {
return {
value: '',
options: []
}
},
methods: {
querySearchAsync(queryString, cb) {
fetch('https://api.github.com/search/repositories?q=' + queryString)
.then(res =>res.json())
.then(({ items }) =>{
const options = items.map(item =>({
value: item.name,
label: item.name + ' (' + item.owner.login + ')',
}))
this.options = options
cb(options)
})
.catch(() =>{
cb([])
})
},
handleSelect(item) {
console.log(item)
},
}
}
</script>

Auto Complete Vue組件可以通過elementUI庫輕松實現。它接受一些特定的屬性和事件，以實現異步自動完成功能。其中， fetch-suggestions屬性用于定義獲取建議列表數據的方法。通過使用JavaScript中的fetch函數，可以將數據請求與一個API端點連接起來，并將其返回為JSON對象。隨后，我們可以使用這個JSON對象來填充職位、消息、產品等等的信息。

在上述代碼中，我們使用了Github的API作為示例。可以看到，我們根據查詢字符串對API進行了調用，然后從結果中提取了必要的數據，并將其結構化到一個可選的列表中。最后，在選中列表中的某個選項時，可以使用@select事件來響應它。