如何在uniapp中实现城市搜索功能

<template><view><button>获取城市数据</button>  </view></template><script>export default {  methods: {    fetchCityData() {      uni.request({        url: 'https://api.example.com/citydata',        success: (res) => {          uni.setStorage({            key: 'cityData',            data: res.data,            success: () => {              uni.showToast({                title: '城市数据获取成功'              })            }          })        }      })    }  }}</script>

<template><view><input v-model="searchText" placeholder="请输入城市名称"><view v-show="showResult"><ul><li v-for="city in searchResult" :key="city.id">{{ city.name }}</li>      </ul></view></view></template><style>  ul {    list-style-type: none;    padding: 0;    margin: 0;  }  li {    padding: 10px;    background-color: lightgray;    cursor: pointer;  }</style><script>export default {  data() {    return {      searchText: '',      cityData: [],      searchResult: [],      showResult: false    }  },  watch: {    searchText() {      this.showResult = true;      if (this.searchText === '') {        this.searchResult = [];        this.showResult = false;      } else {        this.searchResult = this.cityData.filter(city => city.name.includes(this.searchText));      }    }  },  methods: {    handleInput() {      clearTimeout(this.timer);      this.timer = setTimeout(() => {        this.searchResult = this.cityData.filter(city => city.name.includes(this.searchText));      }, 300);    },    selectCity(city) {      // 处理选中城市的逻辑    }  },  mounted() {    uni.getStorage({      key: 'cityData',      success: (res) => {        this.cityData = res.data;      }    })  }}</script>