用手机开的热点，用手机浏览器(夸克浏览器和手机自带的浏览器两个都试了)访问的这个项目地址，代码如下:

<template>
  <div>
    <div class="search cityChooseInput">
      <input class="search-input" type="text" placeholder="输入城市名或拼音" v-model="keyword">
    </div>
    <div class="search-content" ref="search" v-show="keyword" @click.self="reset">
      <ul >
        <li v-for="(item) in list" class="search-item border-bottom"  :key="item.id">
          {{item.name}}
        </li>
        <li class="search-item border-bottom" v-show="hasNoData">
          没有找到匹配数据
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import Bscroll from 'better-scroll'
export default {
  name: "CitySearch",
  props:{
    cities:{

    }
  },
  computed:{
    hasNoData(){
      return !this.list.length
    }
  },
  data() {
    return {
      keyword:'',
      list:[],
      timer:null
    }
  },
  watch: {
    keyword(){
      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(element => {
            if(element.spell.indexOf(this.keyword.toLowerCase()) > -1 || element.name.indexOf(this.keyword) > -1){
              result.push(element)
            }
          });
        }
        this.list = result
      },200)
    }
  },
  mounted() {
    this.scroll = new Bscroll(this.$refs.search)
  },
  methods:{
    reset(){
      this.keyword = ''
    }
  }
};
</script>

<style lang="less" scoped>
@import "~styles/varible.less";
.search {
  height: 36px;
  background: @bgColor;
  padding: 0 5px;
  z-index: 1;
  &-input {

    width: 100%;
    height: 31px;
    line-height: 31px;
    text-align: center;
    border-radius: 3px;
    border: 0;
    color: #666;
    padding: 0 5px;
    outline: 0;
  }
  &-content{
    z-index: 1;
    position: absolute;
    top:79px;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    background: #eee;
    .search-item{
      line-height: 31px;
      padding-left: 10px;
      color: #666;
      background: #fff
    }
  }
}
</style>

问题主要有三个:
老师用的是电脑浏览器模拟的手机访问的，而我用自己的手机浏览器访问的时候，如下图所示：

问题1>右侧的字母列表被键盘顶上来的，并覆盖了输入框部分区域
2>在电脑上模拟手机输入时，当输入"bei"的时候，就应该出现搜索结果，可是手机真机上如上图所示，并没有出现搜索结果，应该是这时候keyword还没有变化，当键盘隐藏的时候才能出现搜索结果
3>我在class为search-content的div上设置了@click.self = “reset”,意图是点击搜索结果下面的空白区域，可以重置keyword为’’(空字符串),但是这个效果同样在电脑上模拟手机浏览器时生效，但是在手机真机上并不生效.
希望老师能解答一下~