input模仿select实时更新搜索内容

input模仿select实时更新搜索内容

1.使用Vue框架和style的stylus样式

2.使用input的oninput事件，能实时根据input的值改变下拉框的数据，oninput事件兼容IE9以上版本，注意：不能使用onchange事件，因为onchange事件必须是在input失焦之后才会改变下拉框数据

3.使用input的onfocus事件将下拉框显示

4.使用input的onblur事件延迟下拉框隐藏，必须使用setTimeout事件延迟，延迟时间差不多是200毫秒，否则下拉框li的点击事件不能执行。

<div class="parent-item">
          <input
            v-model="parentid"
            placeholder="请输入"
            @focus="showParent = true"
            @input="changeInput(parentid)"
            @blur="listBlur"
          />
          <i class="el-icon-caret-bottom parent-icon"></i>
          <ul class="form-ul" v-show="showParent">
            <li v-for="item in parentList" :key="item" @click="parentid = item">{{item}}</li>
          </ul>
        </div>

<script>
export default {
  data() {
    return {
   	  parentid:null,//input绑定的v-model数据
      showParent: false, //下拉框显示
      parentList: [1, 2, 3, 4, 6, 5, 7, 8, 9] //输入框搜索下拉列表
    };
  },

  mounted() {
    this.copyParent = this.parentList; //先提起保留一份
  },

  methods: {
  
    //下拉框的input失焦事件
    listBlur() {
      setTimeout(() => {
        this.showParent = false;
      }, 200);
    },

    //下拉框的input值改变事件（oninput事件）
    changeInput(val) {
      this.parentList = this.copyParent.filter(item => {
        return item == val;
      });
      //还原下拉数据
      if (val == "" || val == null) {
        this.parentList = this.copyParent;
      }
    },
  }
};
</script>

<style lang = "stylus">
.parent-item {
    position: relative;

    .title-font {
      font-size: 15px;
    }

    .parent-icon {
      position: absolute;
      right: 5px;
      top: 9px;
      color: #888888;
    }

    .form-ul {
      list-style: none;
      padding: 0;
      margin: 0;
      position: absolute;
      top: 35px;
      background-color: #ffffff;
      z-index: 100;
      width: 360px;
      border: $borderStyle;
      max-height: 200px;
      overflow-y: auto;

      li {
        padding: 6px;
        cursor: pointer;

        &:hover {
          background-color: $liBackColor;
        }
      }
    }
  }
  </style>