前端萌新求教,我想实现通过输入拼音,得到汉字搜索结果的效果。
具体问题如下
在前端组件中有一个element-ui远程搜索框
<el-autocomplete
v-model="input"
:fetch-suggestions="querySearchAsync"
placeholder="请输入城市中文或拼音"
@select="handleSelect"
/>
JS部分
data() {
return {
province: [],
provinceValue: '',
city: [],
cityValue: '',
input: '',
cities: []
}
}
querySearchAsync: _.debounce(async function(query, callback) {
const self = this
const firstChar = query.charCodeAt(0)
if(firstChar >= 65 || firstChar <= 128) {
console.log(firstChar)
const {status, data:{city}} = await self.$axios.get('/geography/city')
if(status === 200) {
let cityChars
let cityResult = []
city.forEach(item => {
cityChars = pyjs.getFullChars(item.name).toLocaleLowerCase()
if(cityChars.indexOf(query) > -1) {
console.log(cityChars.indexOf(query))
cityResult.push(item.name)
}
})
self.cities = cityResult
callback(self.cities)
}
}
if (self.cities.length) {
callback(self.cities.filter(item => item.value.indexOf(query) > -1))
} else {
const {
status,
data: { city }
} = await self.$axios.get('/geography/city')
if (status === 200) {
self.cities = city.map(item => {
return {
value: item.name
}
})
callback(self.cities.filter(item => item.value.indexOf(query) > -1))
} else {
callback()
}
}
}, 200)
可以确认,接口能够返回所需数据,所需要的包已导入。
甚至可以在搜索框输入:beijing,控制台也可以打印出期待的结果:北京市
但是紧接着就报错:
Uncaught (in promise) TypeError: Cannot read property 'indexOf' of undefined
请问面对这个问题该如何解决?先谢过各位。
初步推测可能是某个undefined的值引起的调用报
加上判断试试
callback(self.cities.filter(item => item.value && item.value.indexOf(query) > -1))
cityChars = pyjs.getFullChars(item.name).toLocaleLowerCase() || ''