利用vue和jQuery实现中国主要城市搜索与选择

实现效果图：

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;">&times;</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        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        100%;
 33       display: flex;
 34       height: 100%;
 35       border-radius: 0.4167rem;
 36       position: relative;
 37     }
 38 
 39     .search-btn {
 40        3.5rem;
 41       height: 2.6667rem;
 42     }
 43 
 44     .search-icon {
 45       position: absolute;
 46       left: 1.25rem;
 47        1.25rem;
 48       height: 1.25rem;
 49       background-size: 1.25rem;
 50     }
 51 
 52     .cancel {
 53        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       /* 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        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        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        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        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        100%;
171     }
172 
173     .city-list p {
174       color: #000000;
175       font-size: 1rem;
176        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