From 382ac97548aa58859b043488cd79e7f1544579de Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=81=87=E8=A7=81?=
 <30545603+Foryou920@users.noreply.github.com>
Date: Thu, 5 Mar 2020 23:06:27 +0800
Subject: [PATCH] search final

---
 index.html                             |  3 +-
 src/pages/city/City.vue                |  2 +-
 src/pages/city/components/Alphabet.vue |  6 +-
 src/pages/city/components/list.vue     |  9 +--
 src/pages/city/components/search.vue   | 87 +++++++++++++++++++++++++-
 src/pages/home/home.vue                |  5 +-
 6 files changed, 95 insertions(+), 17 deletions(-)
diff --git a/index.html b/index.html
index f4abaa9..e93e92c 100644
--- a/index.html
+++ b/index.html
@@ -3,8 +3,7 @@
 
 <head>
     <meta charset="utf-8">
-    <meta name="viewport"
-        content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
     <title>Storyofvue</title>
 </head>
 
diff --git a/src/pages/city/City.vue b/src/pages/city/City.vue
index 1f645d8..a93d235 100644
--- a/src/pages/city/City.vue
+++ b/src/pages/city/City.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <city-header></city-header>
-    <city-search></city-search>
+    <city-search :cities="cities"></city-search>
     <city-list :cities="cities" :hot="hotCities" :letter="letter"></city-list>
     <city-alphabet
       :cities="cities"
diff --git a/src/pages/city/components/Alphabet.vue b/src/pages/city/components/Alphabet.vue
index ee73108..c69e1fb 100644
--- a/src/pages/city/components/Alphabet.vue
+++ b/src/pages/city/components/Alphabet.vue
@@ -70,8 +70,10 @@ export default {
 
 <style lang="stylus" scoped>
 @import '~styles/variable.styl'
+// 应用 CSS 属性 touch-action: none; 这样任何触摸事件都不会产生默认行为，但是 touch 事件照样触发。
+//  https://blog.csdn.net/lijingshan34/article/details/88350456
 *
-  touch-action: pan-y
+  touch-action: none
 .list
   display flex
   flex-direction column
@@ -85,4 +87,4 @@ export default {
     line-height .4rem
     text-align center
     color $bgColor
-</style>
\ No newline at end of file
+</style>
diff --git a/src/pages/city/components/list.vue b/src/pages/city/components/list.vue
index 0d26b2a..4c1d790 100644
--- a/src/pages/city/components/list.vue
+++ b/src/pages/city/components/list.vue
@@ -1,4 +1,4 @@
-<template class="layout">
+<template>
   <div class="list" ref="wrapper">
     <div>
       <div class="area">
@@ -34,13 +34,6 @@
 </template>
 
 <script scoped>
-// document.body.addEventListener(
-//   "touchmove",
-//   function(e) {
-//     e.preventDefault(); //阻止默认的处理方式(阻止下拉滑动的效果)
-//   },
-//   { passive: false }
-// ); //passive 参数不能省略，用来兼容ios和android
 import BScroll from "better-scroll";
 export default {
   name: "CityList",
diff --git a/src/pages/city/components/search.vue b/src/pages/city/components/search.vue
index cc5339e..69a78c1 100644
--- a/src/pages/city/components/search.vue
+++ b/src/pages/city/components/search.vue
@@ -1,17 +1,84 @@
 <template>
-  <div class="search">
-    <input class="search-input" type="text" placeholder="输入城市名或拼音" />
+  <div>
+    <div class="search">
+      <input
+        v-model="keyword"
+        class="search-input"
+        type="text"
+        placeholder="输入城市名或拼音"
+      />
+    </div>
+    <div class="search-content" ref="search" v-show="keyword">
+      <ul>
+        <li
+          class="search-item border-bottom"
+          v-for="item of list"
+          :key="item.id"
+        >
+          {{ item.name }}
+        </li>
+        <li class="search-item border-bottom" v-show="hasNoData">
+          没有找到匹配数据
+        </li>
+      </ul>
+    </div>
   </div>
 </template>
 
 <script>
+import BSorll from "better-scroll";
 export default {
-  name: "CitySearch"
+  name: "CitySearch",
+  props: {
+    cities: Object
+  },
+  data: function() {
+    return {
+      keyword: "",
+      list: [],
+      timer: null
+    };
+  },
+  computed: {
+    hasNoData: function() {
+      return !this.list.length;
+    }
+  },
+  watch: {
+    keyword: function() {
+      if (this.timer) {
+        clearTimeout(this.timer);
+      }
+      if (!this.keyword) {
+        this.list = [];
+        return;
+      }
+      this.timer = setTimeout(() => {
+        const result = [];
+        for (let i in this.cities) {
+          this.cities[i].forEach(value => {
+            if (
+              value.spell.indexOf(this.keyword) > -1 ||
+              value.name.indexOf(this.keyword) > -1
+            ) {
+              result.push(value);
+            }
+          });
+        }
+        this.list = result;
+      }, 100);
+    }
+  },
+  mounted: function() {
+    this.BSorll = new BSorll(this.$refs.search);
+  }
 };
 </script>
 
 <style lang="stylus" scoped>
 @import '~styles/variable.styl'
+*
+  touch-action none
 .search
   height .72rem
   padding 0 .1rem
@@ -25,4 +92,18 @@ export default {
     text-align center
     border-radius .06rem
     color #666666
+.search-content
+  z-index 1
+  overflow hidden
+  position absolute
+  top 1.58rem
+  left 0
+  right 0
+  bottom 0
+  background #eeeeee
+  .search-item
+    line-height .62rem
+    padding-left .2rem
+    background #ffffff
+    color #666666
 </style>
diff --git a/src/pages/home/home.vue b/src/pages/home/home.vue
index e55f9f6..e4f466d 100644
--- a/src/pages/home/home.vue
+++ b/src/pages/home/home.vue
@@ -60,4 +60,7 @@ export default {
 };
 </script>
 
-<style></style>
+<style lang="stylus">
+.HomeF
+  overflow: hidden;
+</style>
