實現效果圖：

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 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实现中国主要城市搜索与选择的全部內容，希望文章能夠幫你解決所遇到的問題。

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