功能實現

技術棧是nuxt.js,需要事先安裝element ui 、loadsh 功能1：搜索框輸入某個一個字或者是兩個字自動彈出符合要求的城市點擊城市需要跳轉相應的城市如下圖所示

HTML代碼

<el-autocompletev-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有符合輸入的值就返回當前的這個itemcb(this.cities.filter((item) => item.value.includes(query)))}//設置延遲時間為200毫秒}, 200),handleSelect(item) {//點擊符合要求的item之后需要執行的代碼邏輯window.location = `${item.value}`},}, } </script>

謝謝觀看，如有不足，敬請指教

總結

以上是生活随笔為你收集整理的城市搜索功能实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。