搜索框实时显示

<template>

  <div id="app">

    <input type="text" @input="handleInput($event)" class="ipt">

    <div class="prompt-box" v-show="isShow">

      <div v-for="item in lists" @click="itemClick(item.name)">{{item.name}}</div>

    </div>

  </div>

</template>

<script>

export default {

  name: 'App',

  data(){

    return {

      isShow:false,

      list:[{

        id:0,

        name:'平凡的世界1',

        price:10,

        isActive:false,

      },{

        id:1,

        name:'平凡的人生2',

        price:20,

        isActive:false,

      },{

        id:2,

        name:'平凡的五中3',

        price:23,

        isActive:true,

      },{

        id:3,

        name:'真实的世界4',

        price:32,

        isActive:false,

      },{

        id:4,

        name:'真棒的世界5',

        price:31,

        isActive:true,

      },{

        id:5,

        name:'惭愧的世界5',

        price:32,

        isActive:true,

      },

      {

        id:6,

        name:'残忍的世界5',

        price:32,

        isActive:true,

      }

      ],

      lists:[],

    }

  },

  computed:{

    

  },

  mounted(){

     

  },

  methods:{

    handleInput(event){

      let value = event.target.value;

      if(value.trim()){

        this.isShow = true;

        this.lists = this.list.filter(item => {

          return  item.name.indexOf(value) !== -1

        })

      }else{

        this.isShow = false;

        this.lists = '';

      }

    },

    itemClick(name){

      document.querySelector('.ipt').value = name

    }

  }

}

</script>

<style>

.prompt-box{

  position: relative;

  width: 200px;

  white;

  border-radius: 5px;

  margin-left: 30px;

  margin-top: 10px;

  border:1px solid rgb(218, 223, 218)

}

.prompt-box::before{

  content: '';

  width: 0;

  height: 0;

  position: absolute;

  left: 2px;

  z-index: 10;

  top: -21px;

  border-top:10px solid transparent;

  border-left:10px solid transparent;

  border-right:10px solid transparent;

  border-bottom:10px solid rgb(218, 223, 218);

}

.prompt-box input{

  outline: none;

}

</style>