新增了搜索功能

src/components/city.vue

@@ -1,15 +1,17 @@
 <template>
   <div id="city">
     <header-item message="城市列表" backUrl="/"></header-item>
+    <div class="search-city"><input type="text" placeholder="请输入要搜索的城市" v-model="citySearch" :value="citySearch"></div>
     <div>
-      <div v-for="item in letter" class="letter-item">
+      <div id="showCityContent"></div>
+      <div v-for="item in showCity" class="letter-item">
         <div><a :id="item.letter">{{item.letter}}</a></div>
         <div v-for="i in item.citylist">{{i}} </div>
       </div>
     </div>
     <aside class="letter-aside">
       <ul>
-        <li v-for="item in letter" @click="naver(item.letter)">{{item.letter}} </li>
+        <li v-for="item in showCity" @click="naver(item.letter)">{{item.letter}} </li>
       </ul>
     </aside>
     <div id="tip">
@@ -18,6 +20,10 @@
 
 
 
+
+
+
+
     </div>
   </div>
 </template>
@@ -30,8 +36,15 @@
   var letter = []
   var countPage = 0
   var tipLetter = ''
+  var citySearch = ''
+  var showCity = []
+  var showCityList = []
+  var showCityTemp
   export default {
     beforeCreated: function () {
+    },
+    updated: function () {
+
     },
     created: function () {
       countPage++
@@ -45,9 +58,8 @@
               cityNames.push(cityLists[j].citysName)
             }
           }
-          this.buildLetter()
           cityNamesFilter = cityNames
-          this.buildItem(cityNamesFilter)
+          this.cityFilter(this.citySearch)
           this.someData = response.data.body
         }, response => {
         })
@@ -56,27 +68,37 @@
     mounted: function () {
     },
     methods: {
-      buildLetter: function () {
+      buildLetter: function () {  // 构建字母项
+        letter = []
         for (let i = 0; i < 25; i++) {
           let obj = {}
           obj.letter = String.fromCharCode((65 + i))
           obj.citylist = []
           letter.push(obj)
         }
       },
-      getFirstLetter: function (str) {
+      getFirstLetter: function (str) { //  得到城市第一个字的首字母
         return pinyin(str)[0][0].charAt(0).toUpperCase()
       },
-      buildItem: function (cityNamesFilter) {
+      buildItem: function (cityNamesFilter) {  // 构建城市
+        this.buildLetter()
         let _this = this
+        for (let i = 0; i < 25; i++) {
+          letter[i].citylist = []
+        }
         for (let i = 0; i < cityNamesFilter.length; i++) {
           let _index = Number(_this.getFirstLetter(cityNamesFilter[i]).charCodeAt() - 65)
           if (_index > 0 && _index < 25) {
             letter[_index].citylist.push(cityNamesFilter[i])
           }
         }
+        // 如果letter中citylist中没有值的话，过滤这一项
+        showCity = showCityTemp = letter.filter(function (value) {
+          let len = value.citylist.length
+          return len > 0
+        })
       },
-      naver: function (id) {
+      naver: function (id) { // 点击右边字母滚动
         this.tipString = id
         let obj = document.getElementById(id)
         let tip = document.getElementById('tip')
@@ -86,13 +108,41 @@
         }, 500)
         let oPos = obj.offsetTop
         return window.scrollTo(0, oPos - 36)
+      },
+      cityFilter: function (city) {  // 城市搜索筛选
+        let showCityListTemp
+        this.buildItem(cityNamesFilter)
+        showCity = showCityTemp
+        showCity = showCity.filter(function (value) {
+          showCityList = value.citylist
+          showCityListTemp = showCityList.filter(function (val) {
+            return (val.indexOf(city) > -1)
+          })
+          value.citylist = showCityListTemp
+          return value.citylist.length > 0
+        })
+        this.showCity = showCity
+        if (showCity.length === 0) {
+          let _showCityContent = document.getElementById('showCityContent')
+          _showCityContent.innerText = '查询不到结果'
+          _showCityContent.setAttribute('class', 'tipShow')
+        } else {
+          document.getElementById('showCityContent').innerText = ''
+        }
       }
     },
     data () {
       return {
         cityNames: cityNamesFilter,
         letter: letter,
-        tipString: tipLetter
+        tipString: tipLetter,
+        citySearch: citySearch,
+        showCity: showCity
+      }
+    },
+    watch: {
+      citySearch: function (newCitySearch) {
+        this.cityFilter(newCitySearch)
       }
     }
   }
@@ -166,4 +216,21 @@
       opacity: 0;
     }
   }
+
+  .search-city {
+    text-align: center;
+    padding: 5px 0;
+    input {
+      line-height: 24px;
+      border-radius: 5px;
+      outline: none;
+    }
+  }
+
+  .tipShow {
+    text-align: center;
+    line-height: 60px;
+    font-size: 16px;
+    color: #bbbbbb;
+  }
 </style>