vue 模糊搜索

首先创建一个input框，用v-model双向数据绑定，方便获取input框的value值

<div class="home">
    <input type="text" placeholder="请输入城市名称" v-model="inputValue" @input="searchValue()" @keyup="searchValue_2($event)" />
    <div v-for="item in listValue" :key="item.id" ref="onList" @click="changeList(item.name)">
      {{item.name}}
    </div>
  </div>

js

export default {
  data(){
    return {
      inputValue: '',
      listValue: [],
      list: [
        {
          id: 1,
          name: '苹果'
        },
        {
          id: 2,
          name: '苹苹'
        },
        {
          id: 3,
          name: '梨'
        },
        {
          id: 4,
          name: '葡萄'
        },
        {
          id: 5,
          name: '果苹'
        },
      ]
    }
  },
  mounted() {

  },
  methods: {
    searchValue() {
      if(this.inputValue == ''){
        this.listValue == ''
        return
      }
      this.listValue = this.list.filter(value => value.name.indexOf(this.inputValue) != -1)
    }，
    searchValue_2(ev) {
    //键盘事件
      if (ev.keyCode == 38){
        // up
        this.current --;
        if(this.current <= 0) {
            this.current = 0;
        }
      }else if(ev.keyCode == 40) {
        //down
        this.current ++;
        if(this.current >= this.listValue.length) {
            this.current = this.listValue.length -1;
        }
      }else if(ev.keyCode == 13) {
        //enter
        console.log('enter');
        this.inputValue = this.listValue[this.current].name
      }
      //up down键选中状态背景颜色改变
      this.listValue.forEach((item, index) => {
        if (index == this.current) {
          this.$refs.onList[index].style.background = '#ccc'
        }else {
          this.$refs.onList[index].style.background = '#fff'
        }
      })
    },
  	//选中
    changeList (value) {
      this.inputValue = value
    }
  }
}