Comment implémenter la fonction de recherche de ville dans Uniapp

Comment implémenter la fonction de recherche de ville dans uniapp

Avec le développement des applications mobiles, la demande de localisation géographique est de plus en plus élevée. Dans de nombreuses applications, la fonction de recherche de ville est devenue l'une des fonctions nécessaires. Cet article présentera comment implémenter la fonction de recherche de ville dans uniapp et joindra des exemples de code correspondants.

1. Obtenir les données de la ville

Pour mettre en œuvre la fonction de recherche de ville, vous devez d'abord obtenir les données de la ville. Les données de la ville en temps réel peuvent être obtenues via l'interface réseau, ou les données de la ville peuvent être enregistrées localement à l'avance. Le code suivant est un exemple qui montre comment obtenir des données de ville via l'interface réseau et les enregistrer localement :

<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>

Dans le code ci-dessus, une requête réseau est envoyée pour obtenir des données de ville via la méthode uni.request, et les données sont enregistré dans la méthode uni.setStorage dans le cityData local. Après une acquisition réussie, utilisez la méthode uni.showToast pour afficher une invite.

2. Implémentez la fonction de recherche de ville

Après avoir obtenu les données de la ville, vous pouvez commencer à implémenter la fonction de recherche de ville. Le code suivant est un exemple qui montre comment implémenter la fonction de recherche de ville dans 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>

Dans le code ci-dessus, une balise d'entrée est d'abord définie pour saisir les mots-clés de recherche, puis les données et le statut pertinents, puis utilisez l'attribut watch pour ; surveillez les modifications dans searchText et filtrez en fonction des mots-clés saisis ; gérez l'événement d'entrée de la zone de saisie via la méthode handleInput et définissez une minuterie pour effectuer l'opération de recherche si aucun nouveau mot-clé n'est saisi dans les 300 millisecondes ; données de la ville via la méthode uni.getStorage dans la fonction de cycle de vie montée.

Dans cet exemple, les résultats de la recherche seront affichés dans la liste ci-dessous, et l'interface peut être ajustée et les données traitées selon les besoins.

3. Résumé

Grâce au tutoriel ci-dessus, nous pouvons voir comment implémenter la fonction de recherche de ville dans uniapp. En obtenant des données sur la ville et en effectuant un filtrage basé sur des mots-clés de recherche, une fonction de recherche de ville simple peut être mise en œuvre. Bien entendu, dans les applications réelles, l’algorithme de recherche et l’interaction de l’interface peuvent également être optimisés selon les besoins pour améliorer l’expérience utilisateur.

J'espère que cet article vous aidera à implémenter la fonction de recherche de ville dans uniapp !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!