自定义input框的模糊匹配

  <!-- 窗口列表 -->
  <div id="app" class="app-container" >
    <h3>窗口列表</h3>
    <div class="input_box">
      <input class="input_style" type="text" v-model="val" />
      <ul class="ul_style" v-if="val.length !== 0 && isShow">
        <li @click="changeInfo(item)" class="li_style" v-for="(item, index) in newArr">{{ item.name }}</li>
      </ul>
    </div>
  </div>
<script src="js/vue.js"></script>
<script>
new Vue({
    el:'#app',
    data:{
        val: "",
        isShow: false,
        newArr: [],
        arr: [
          { name: "张三", age: 18 },
          { name: "李四", age: 18 },
        ],
    },
    watch:{
      val:function(newVal,oldVal){
          console.log(newVal,'newVal')
          console.log(oldVal,'oldVal')
          
        this.newArr = this.arr.filter(item => {
          if(item.name.indexOf(newVal) !== -1) return item;
        });
        if(this.newArr.length !== 0) this.isShow = true;
      }
    },
    methods: {
      changeInfo(item){
          console.log(this.val.length,'this.val.length')
        this.val = item.name;
        this.$nextTick(() => {
          this.isShow = false;
        })
      }
    },
})


</script>

<style lang="scss" scoped>
.input_box{
  width:500px;
  position:relative;
}

.input_style{
  width:calc(100% - 25px);
}

.ul_style{
  width:calc(100% - 25px);
  height:auto;
  position:absolute;
  top:10px;
  left:0;
  border:1px solid #ddd;
}

.li_style{
  height:30px;
  line-height: 30px;
  width:100%;
}

</style>