JS实现拼音搜索的问题

前端萌新求教,我想实现通过输入拼音,得到汉字搜索结果的效果。

具体问题如下

在前端组件中有一个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

请问面对这个问题该如何解决?先谢过各位。

阅读 2.8k
1 个回答

初步推测可能是某个undefined的值引起的调用报
加上判断试试
callback(self.cities.filter(item => item.value && item.value.indexOf(query) > -1))
cityChars = pyjs.getFullChars(item.name).toLocaleLowerCase() || ''

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题