利用vue和jQuery实现中国主要城市搜索与选择
2024-06-12 10:17:04
实现效果图：
HTML代码：
1 <div id="box">
2 <!--城市索引查询-->
3 <div class="search-header">
4 <div class="form">
5 <span class="search-btn"><span class="search-icon">search</span></span>
6 <input type="text" class="input" placeholder="输入要搜索的城市" autofocus maxlength="24"/>
7 </div>
8 <div class="shade-box" v-show="shade"></div>
9 <ul class="search-city-box" style="display:none;" >
10 <li class="search-city-li" v-for="city in cityList" v-on:click="searchCityBtn(city)">{{city.name}}</li>
11 </ul>
12 </div>
13 <div class="position-city">
14 <div>
15 <span>当前城市:</span>
16 <span class="curr-selected-city"></span>
17 <span class="cancel" style="display:none;">×</span>
18 </div>
19 </div>
20 <!--城市列表-->
21 <div class="letter">
22 <ul>
23 <li><a href="#热门城市1" class="host-city">热门城市</a></li>
24 <li><a href="#热门城市1" class="host-city"></a></li>
25 <li><a href="#A1">A</a></li>
26 <li><a href="#B1">B</a></li>
27 <li><a href="#C1">C</a></li>
28 <li><a href="#D1">D</a></li>
29 <li><a href="#E1">E</a></li>
30 <li><a href="#F1">F</a></li>
31 <li><a href="#G1">G</a></li>
32 <li><a href="#H1">H</a></li>
33 <li><a href="#J1">J</a></li>
34 <li><a href="#K1">K</a></li>
35 <li><a href="#L1">L</a></li>
36 <li><a href="#M1">M</a></li>
37 <li><a href="#N1">N</a></li>
38 <li><a href="#P1">P</a></li>
39 <li><a href="#Q1">Q</a></li>
40 <li><a href="#R1">R</a></li>
41 <li><a href="#S1">S</a></li>
42 <li><a href="#T1">T</a></li>
43 <li><a href="#W1">W</a></li>
44 <li><a href="#X1">X</a></li>
45 <li><a href="#Y1">Y</a></li>
46 <li><a href="#Z1">Z</a></li>
47 </ul>
48 </div>
49 <div class="container">
50 <div class="city">
51 <div class="city-list" v-for="cityDetail in cityInfo">
52 <span class="city-letter" :id="cityDetail.name+1">{{cityDetail.name}}</span>
53 <p v-bind:data-id="city.code" v-for="city in cityDetail.cities" @click="cityBtn(city)" :class="{city_selected:citySelect===city.code}">{{city.name}}</p>
54 </div>
55 </div>
56 </div>
57
58 </div>css样式：
1 body {
2 background: #fbfafa;
3 margin: 0;
4 padding: 0;
5 }
6
7 #box {
8 width: 100%;
9 height: 100%;
10 margin: 0 auto;
11 }
12
13 ul,li {
14 list-style: none;
15 margin: 0;
16 padding: 0;
17 }
18
19 .search-header {
20 /*position: relative;*/
21 height: 2.6667rem;
22 background: #F2F2F2;
23 z-index: 1000;
24 margin: 0.8333rem 1.25rem;
25 display: flex;
26 text-align: center;
27 line-height: 2.6667rem;
28 border-radius: 1.25rem;
29 }
30
31 .search-header .form {
32 width: 100%;
33 display: flex;
34 height: 100%;
35 border-radius: 0.4167rem;
36 position: relative;
37 }
38
39 .search-btn {
40 width: 3.5rem;
41 height: 2.6667rem;
42 }
43
44 .search-icon {
45 position: absolute;
46 left: 1.25rem;
47 width: 1.25rem;
48 height: 1.25rem;
49 background-size: 1.25rem;
50 }
51
52 .cancel {
53 width: 1.25rem;
54 height: 1.25rem;
55 vertical-align: middle;
56 background-size: 1.25rem;
57 border-radius: 50%;
58 margin-left: 0.25rem;
59 font-size: 20px;
60 }
61
62 .shade-box{
63 position: fixed;
64 top: 68px;
65 left: 0;
66 right: 0;
67 bottom: 0;
68 z-index: 100;
69 background: rgba(0,0,0,0.6);
70 }
71 .search-city-box {
72 position: absolute;
73 top: 2.6667rem;
74 border: 0.0833rem solid #E5E5E5;
75 border-bottom: none;
76 background: #fff;
77 /*width: 100%;*/
78 border-radius: 0.4167rem;
79 max-height: 24.6667rem;
80 overflow: hidden;
81 right: 50px;
82 left: 20px;
83 margin: 0;
84 padding: 0;
85 z-index: 300;
86 overflow-y:auto;
87 }
88
89 .search-city-li {
90 height: 3rem;
91 border-bottom: 0.0833rem solid #E5E5E5;
92 }
93
94 .form input {
95 display: block;
96 background: #F2F2F2;
97 border: none;
98 outline: none;
99 padding: 0.75rem 2.9167rem 0.75rem 0.8333rem;
100 font-size: 12px;
101 color: #9D9D9D;
102 width: 70%;
103 border-radius: 1.25rem;
104 text-align: center;
105 }
106
107 .position-city {
108 height: 3.5rem;
109 line-height: 3.5rem;
110 padding: 0 0.4167rem 0 1.25rem;
111 border-top: 0.0833rem solid #E5E5E5;
112 border-bottom: 0.08333rem solid #E5E5E5;
113 }
114
115 .showLetter span {
116 width: 4.1667rem;
117 height: 4.1667rem;
118 line-height: 4.1667rem;
119 font-size: 2.5rem;
120 }
121
122 .container {
123 margin: 0 1.25rem;
124 height: 35.3333rem;
125 }
126
127 .letter {
128 width: auto;
129 position: fixed;
130 top: 5rem;
131 right: 0.8333rem;
132 text-align: center;
133 }
134
135 .letter ul {
136 list-style-type: none;
137 }
138
139 .letter ul li a {
140 text-decoration: none;
141 color: #5ECDAF;
142 font-size: 0.6667rem;
143 }
144
145 .host-city {
146 display: inline-block;
147 color: #5ECDAF;
148 font-size: 0.6667rem;
149 width: 2.3333rem;
150 height: 3.5rem;
151 overflow: hidden;
152 }
153
154 .city {
155 height: 100%;
156 }
157
158 .city-list {
159 margin-right: 0.8333rem;
160 display: flex;
161 flex-wrap: wrap;
162 }
163
164 .city-list .city-letter {
165 font-size: 1.25rem;
166 display: inline-block;
167 padding-top: 1.25rem;
168 padding-bottom: 0.4167rem;
169 color: #5ECDAF;
170 width: 100%;
171 }
172
173 .city-list p {
174 color: #000000;
175 font-size: 1rem;
176 width: 28%;
177 height: 2.5rem;
178 line-height: 33px;
179 text-align: center;
180 margin: 0.4167rem 0.8333rem 0.4167rem 0;
181 overflow: hidden;
182 border: 0.0833rem solid #E5E5E5;
183 cursor: pointer;
184 }
185
186 .city-list .city_selected {
187 border: 0.0833rem solid #5ECDAF;
188 }js代码：
1 <script>
2
3 var Drl = new Vue({
4 el: '#box',
5 data: {
6 shade:false,
7 cityInfo: [],
8 cityList: [],
9 degreeOn: true,
10 citySelect: '-1'
11 },
12 methods: {
13 //点击城市
14 cityBtn: function (city) {
15 this.citySelect = city.code;
16 cityCode = city.code;
17 // $('.tab-city').text(city.name);
18 $('.curr-selected-city').text(city.name);
19 //显示删除按钮
20 $('.cancel').show();
21
22 },
23 //点击搜索的城市
24 searchCityBtn: function (city) {
25 $('.tab-city').text(city.name);
26 $('.curr-selected-city').text(city.name);
27 this.shade = false;
28 cityCode = city.code;
29 $('.cancel').show();
30 $('.search-city-box').hide();
31 }
32 }
33
34 })
35
36 $(function () {
37 // var comprehensive = 1;
38 cityCode = '';
39 //删除已选择的城市
40 var cityList = $('.city-list p');
41 $('.cancel').on('click', function () {
42 cityList.removeClass('city-selected');
43 $('.curr-selected-city').text('');
44 $('.tab-city').text('选择区域');
45 cityCode = '';
46 Drl.citySelect = -1;
47
48 $('.cancel').hide();
49 })
50
51
52 //点击搜索城市
53 $('.search-btn').on('click', function () {
54 searchCity();
55 Drl.shade = true;
56 })
57 $('input').on('keyup', function (event) {
58 //console.log(event.keyCode);
59 searchCity();
60 Drl.shade = true;
61 var cityName = $('input').val();
62 if (cityName) {
63 if (event.keyCode == 13) {
64 searchCity();
65 if (Drl.cityList.length == 0) {
66 alert('没找到' + cityName + '这个城市！');
67 }
68 }
69 }
70 else {
71 $('.search-city-box').hide();
72 Drl.shade = false;
73
74 }
75
76 if (Drl.cityList.length == 0 | !cityName){
77 Drl.shade = false;
78 }
79 })
80
81 //搜索城市请求方法
82 var searchCity = function (city) {
83 var cityName = $('input').val();
84 console.log(cityName);
85 if (cityName) {
86 var cityInfo = Drl.cityInfo;
87 //筛选city的对象
88 var cityArr = [];
89 //遍历结果对象
90 for (var i = 1; i < cityInfo.length; i++) {
91 for (var j = 0; j < cityInfo[i].cities.length; j++) {
92 var cityIndex = cityInfo[i].cities[j].name.indexOf(cityName);
93 if (cityIndex >= 0) {
94 var cityObj = {};
95 cityObj.code = cityInfo[i].cities[j].code;
96 cityObj.name = cityInfo[i].cities[j].name;
97 cityArr.push(cityObj);
98 }
99 }
100 }
101 console.log(cityArr);
102 Drl.cityList = cityArr;
103 $('.search-city-box').show();
104 }
105 }
106
107 //读取本地城市json文件
108 $.getJSON("static/city.json", function (data) {
109 console.log(data);
110 Drl.cityInfo = data;
111 })
112 })
113 </script>项目代码请看：https://github.com/bushanjiangzi/webCode/blob/master/cityList.rar
转载于:https://www.cnblogs.com/bushan/p/11101744.html
利用vue和jQuery实现中国主要城市搜索与选择相关推荐
- 利用NPP-VIIRS夜光数据识别中国收缩城市
来源:北京城市实验室BCL 本文多图,建议阅读5分钟. 我们比较了2013年至2016年可见光红外成像辐射计套件(NPP-VIIRS)数据的调整后的夜光强度,以准确地识别出整个中国正在收缩的城市. [ ...
- npp夜光数据介绍 viirs_利用NPP-VIIRS夜光数据识别中国收缩城市
来源:北京城市实验室BCL 本文多图,建议阅读5分钟. 我们比较了2013年至2016年可见光红外成像辐射计套件(NPP-VIIRS)数据的调整后的夜光强度,以准确地识别出整个中国正在收缩的城市. [ ...
- 使用vue.js + jQuery开发组件
本模式有3个要点: 1)利用vue.js实现html封装进组件,让复用可以落地: 2)jquery负责操作dom: 3)js函数模拟面向对象中的类,运行时通过new方式创建对象,将dom标识符和业务数 ...
- 2020年中国智慧城市发展值得关注的技术
文章来源:Gartner 图片来源:网络 每年Gartner发布的技术成熟度曲线(The Hype Cycle)报告都备受市场瞩目,也成为政府及企业做出重大投资决策的风向标.其原因在于,它不仅能够让C ...
- IDC发布2017年中国智慧城市IT十大预测
日前,IDC最新发布了<IDC FutureScape:全球智慧城市2017年预测--中国启示>的报告(IDC#CHE41445917,2017年2月).报告详尽地介绍并解读了IDC对中国 ...
- 深圳可能是理解中国数字城市建设的窗口
[深几度·数字化转型系列] 撰稿|吴俊宇 燕玉涵 编辑|吴俊宇 「摘要:城市智慧化是通往未来城市的一个不断迭代的过程,而不是最终结果.顶层设计下,需要统一标准的数字架构做支撑基座,满足在智慧城市发展道 ...
- 《中国主要城市道路网密度监测报告》正式发布
本文转自:中规院交通院 为了深入贯彻落实党的十九大和中央城市工作会议精神,积极落实<中共中央国务院关于进一步加强城市规划建设管理工作的若干意见>(中发[2016]6号)相关要求,有序推动城 ...
- 2016年中国智慧城市发展前瞻
很早以前,三星展示了一款21.5英寸超大屏幕的智能冰箱,从冰箱的大屏幕上能够查看到天气预报,播放音乐等智能服务,这就给了谷歌带来了一个灵感,想要制作出一个具有视觉体验和触屏感受的新物种--智能镜子,并 ...
- 利用区块链技术助力中国影视产业的发展升级
受益近年的国家文化产业政策,我国电影产业取得了举世瞩目的成绩,电影市场空前活跃,市场规模增长迅速.所有巨额资本的投入,观影人群不断的增长,中国电影产业也逐步"规模化 ",也反映出我 ...
最新文章
- C#+Vue推送连续图片 到前端播放视频解决方案
- 共享数字经济之光！世界互联网大会重磅发布“30位新生代数字经济人才”
- linux新用户登陆密码,如何强制Linux用户在第一次登录时更改初始密码？
- 未来不是计算机发展的方向,未来人类的方向，或许不是人工智能，而是智能人类...
- [云炬创业管理笔记]第二章测试6
- java 中的内省 introspector
- js中select下拉框重置_如何利用CSS3制作炫酷的下拉框
- sqlserverv中处理字符串包含、截取
- 【转载】Linux等类Unix系统学习用书那点事儿！
- 移植最新版libmemcached到VC++的艰苦历程和经验总结(上)
- npoi 未将对象引用设置到对象的实例_带你探索JVM的对象
- 温习下 function pointer.
- python游戏程序代码大全_童年游戏，Python一行代码就能实现！
- 谁说技术男没有人文情怀：当旅途遇到生命赞歌
- linux内核抢占加锁,linux内核的preempt抢占调度，preempt_count抢占保护“锁”
- 行测-图形推理-2-黑白格类
- NOIP复健计划——动态规划
- linux载入pytorch的预训练模型时遇到_pickle.UnpicklingError: unpickling stack underflow
- 用Eclipse搭建VLC SDK开发环境
- EOS合约账户名称及作用