当前位置：首页 > VUE

vue实现城市模糊查询

2026-01-23 03:58:00VUE

实现思路

使用Vue实现城市模糊查询功能，主要通过输入框监听用户输入，结合数组的过滤方法动态匹配城市名称。核心步骤包括数据准备、输入监听、模糊匹配和结果展示。

数据准备

准备一个城市列表数据，可以存储在组件的data中或通过API获取。示例数据格式如下：

data() {
  return {
    cities: ['北京', '上海', '广州', '深圳', '杭州', '成都', '重庆', '武汉'],
    searchText: '',
    filteredCities: []
  }
}

输入监听

使用v-model双向绑定输入框的值，并监听输入变化触发查询方法：

<template>
  <div>
    <input v-model="searchText" @input="searchCities" placeholder="输入城市名">
    <ul>
      <li v-for="city in filteredCities" :key="city">{{ city }}</li>
    </ul>
  </div>
</template>

模糊匹配

在methods中实现搜索逻辑，使用filter和includes方法进行模糊匹配：

methods: {
  searchCities() {
    if (!this.searchText) {
      this.filteredCities = [];
      return;
    }
    this.filteredCities = this.cities.filter(city => 
      city.includes(this.searchText)
    );
  }
}

优化搜索

为提升用户体验，可以添加以下优化：

vue实现城市模糊查询

忽略大小写：将城市名和输入文本都转为小写比较
防抖处理：减少频繁触发搜索的频率

searchCities: _.debounce(function() {
  const query = this.searchText.toLowerCase();
  this.filteredCities = this.cities.filter(city =>
    city.toLowerCase().includes(query)
  );
}, 300)

完整示例代码

<template>
  <div>
    <input 
      v-model="searchText" 
      @input="searchCities" 
      placeholder="输入城市名"
    >
    <ul v-if="filteredCities.length">
      <li v-for="city in filteredCities" :key="city">
        {{ city }}
      </li>
    </ul>
    <p v-else>暂无匹配城市</p>
  </div>
</template>

<script>
import _ from 'lodash';

export default {
  data() {
    return {
      cities: ['北京', '上海', '广州', '深圳', '杭州', '成都', '重庆', '武汉'],
      searchText: '',
      filteredCities: []
    }
  },
  methods: {
    searchCities: _.debounce(function() {
      const query = this.searchText.toLowerCase();
      this.filteredCities = this.cities.filter(city =>
        city.toLowerCase().includes(query)
      );
    }, 300)
  }
}
</script>