<el-autocomplete
v-model="form.name"
:fetch-suggestions="querySearch"
clearable
class="inline-input w-50"
placeholder="Please Input"
@select="handleSelect"
style="width: 220px"
>
<template #default="{ item }">
<div class="value">{{ item.name }}</div>
</template>
</el-autocomplete>
interface LineBody {
id: string
name: string
}
const lineBodys = ref<LineBody[]>([])
const querySearch = (queryString: string, cb: any) => {
const results = queryString ? lineBodys.value.filter(createFilter(queryString)) : lineBodys.value
// call callback function to return suggestions
cb(results)
}
const createFilter = (queryString: string) => {
return (lineBody) => {
//return lineBody.name.toLowerCase().indexOf(queryString.toLowerCase()) === 0
return lineBody.name.toLowerCase().indexOf(queryString.toLowerCase()) >= 0
}
}
const loadAll = async () => {
const results = await getLineBodys()
return results.items
}
const handleSelect = (item: LineBody) => {
form.value.name = item.name
}
onMounted(async () => {
lineBodys.value = await loadAll()
})
