How to implement city search function in uniapp

How to implement city search function in uniapp

With the development of mobile applications, people's demand for geographical location is getting higher and higher. In many applications, the city search function has become one of the necessary functions. This article will introduce how to implement the city search function in uniapp, and attach corresponding code examples.

1. Obtain city data

To implement the city search function, you first need to obtain city data. Real-time city data can be obtained through the network interface, or city data can be saved locally in advance. The following code is an example that demonstrates how to obtain city data through the network interface and save it locally:

<template>
  <view>
    <button @click="fetchCityData">获取城市数据</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>

In the above code, a network request is sent through the uni.request method to obtain city data, and the city data is obtained through the uni.setStorage method. Save the data in local cityData. After successful acquisition, use the uni.showToast method to give a prompt.

2. Implement the city search function

After obtaining the city data, you can start to implement the city search function. The following code is an example that demonstrates how to implement the city search function in uniapp:

<template>
  <view>
    <input v-model="searchText" placeholder="请输入城市名称" @input="handleInput"/>
    <view v-show="showResult">
      <ul>
        <li v-for="city in searchResult" :key="city.id" @click="selectCity(city)">{{ 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>

In the above code, an input tag is first defined for entering search keywords; then it is defined in the data attribute Relevant data and status; then use the watch attribute to monitor changes in searchText and filter based on the entered keywords; handle the input event of the input box through the handleInput method, and set a timer if no new keywords are entered within 300 milliseconds. Then perform the search operation; finally, obtain the saved city data through the uni.getStorage method in the mounted life cycle function.

In this example, the search results will be displayed in the list below, and the interface can be adjusted and data processed as needed.

3. Summary

Through the above tutorial, we can see how to implement the city search function in uniapp. By obtaining city data and filtering based on search keywords, a simple city search function can be implemented. Of course, in actual applications, the search algorithm and interface interaction can also be optimized as needed to improve user experience.

I hope this article will be helpful to you in implementing the city search function in uniapp!

The above is the detailed content of How to implement city search function in uniapp. For more information, please follow other related articles on the PHP Chinese website!