功能实现
技术栈是nuxt.js,需要事先安装element ui 、loadsh
功能1：搜索框输入某个一个字或者是两个字自动弹出符合要求的城市
点击城市需要跳转相应的城市如下图所示
HTML代码
<el-autocomplete
v-model="input"
style="margin-left:25px;"
:fetch-suggestions="querySearchAsync"
placeholder="请输入城市的拼音"
@select="handleSelect"
></el-autocomplete>
用的element ui 远程搜索组件
vuex存储的数据
cities: [
{
value: "北京市" }, {
value: "天津市" }, {
value: "上海市" },
{
value: "重庆市" },
{
value: "香港特别行政区" },
{
value: "澳门特别行政区" },
{
value: "哈尔滨市" },
{
value: "阿城市" },
{
value: "双城市" }, {
value: "尚志市" }, {
value: "五常市" },
{
value: "齐齐哈尔市" },
{
value: "讷河市" },
{
value: "鸡西市" },
{
value: "虎林市" },
{
value: "密山市" },
{
value: "鹤岗市" },
{
value: "双鸭山市" },
{
value: "大庆市" },
{
value: "伊春市" },
{
value: "铁力市" },
{
value: "佳木斯市" },
{
value: "同江市" },
{
value: "富锦市" },
{
value: "七台河市" },
{
value: "牡丹江市" },
{
value: "海林市" },
{
value: "宁安市" },
{
value: "穆棱市" },
{
value: "黑河市" },
{
value: "北安市" },
{
value: "五大连池市" },
{
value: "绥化市" },
{
value: "安达市" },
{
value: "肇东市" },
{
value: "海伦市" },
]
//文章篇幅有限 只写了这些城市，觉得不够的可以自行添加
js代码
//相关的数据存储在vuex中 通过vuex中的mapState 取出数据
import {
mapState } from 'vuex'
import _ from 'lodash'
import area from '../../../assets/js/area'
export default {
name: 'Cselect',
data() {
return {
}
},
computed: {
...mapState(['cities']),
},
methods: {
//使用lodash的debounce，做延迟请求以便于减少服务器的压力
//debounce函数中的第一个参数是当前输入的内容，第二个参数是回调函数
//回调函数里面返回的是符合要求的值
querySearchAsync: _.debounce(function (query, cb) {
//逻辑判断是否有值
if (this.cities.length) {
//对拿到的数组进行过滤，如果item中value有符合输入的值就返回当前的这个item
cb(this.cities.filter((item) => item.value.includes(query)))
}
//设置延迟时间为200毫秒
}, 200),
handleSelect(item) {
//点击符合要求的item之后需要执行的代码逻辑
window.location = `${
item.value}`
},
},
}
</script>
谢谢观看，如有不足，敬请指教