前端vue2实现模糊查询

纯前端vue2实现模糊查询

最近 在项目中要实现纯前端实现模糊查询 但是项目比较老 所以使用自己画一个 然后用一些基本的事件实现 画不多说上代码

Html

<input style="width:4rem" v-model="searchQuery" @focus="performSearch" @input="performSearch1" placeholder="输入进行模糊查询" @blur="clearInput">
        <ul v-if="filteredOptions.length > 0"  class="dropdown" style="position: absolute;margin-left: 0.82rem;width: 3.99rem;height: 200px; background: #fff; z-index:99999;overflow-y: scroll;position: absolute;top: 19px;box-shadow: 3px 3px 2px rgb(0 0 0 / 12%);border-left: 1px solid;">
            <li v-for="option in filteredOptions" @click="selectOption(option)" @mousedown.prevent @mouseup.prevent>{{ option.name }}</li>
        </ul>

完整代码

data中定义如下变量

searchQuery: '',
filteredOptions: [],

使用focus 聚焦是查询所有 @input 输入是也进行查询 @blur失焦时 关闭模糊查询框
###方法如下

performSearch: function() {
  let query = this.searchQuery;
  console.log(this.ListArrary);//确保从后端获取到数据 
    this.filteredOptions = this.ListArrary.filter(item => {
          return item.name;
        });
},
performSearch1: function() {
  const query = this.searchQuery;
    this.isShowul=true;
    this.filteredOptions = this.ListArrary.filter(item => {
          return item.name.includes(query);
        });
},
selectOption: function(option) {
       this.searchQuery = option.name;
      this.Org=option.value//码值赋值  实际是用码值进行的查询
      this.getchaxunData()//调取接口实现查询
      this.filteredOptions = [];
},
clearInput: function() {
        setTimeout(() => {
            const inputElement = this.$refs.input;
            const dropdownElement = this.$el.querySelector('.dropdown');
            let activeElement = document.activeElement;
            let isInsideInputOrDropdown = false;
            while (activeElement) {
              if (activeElement === inputElement || (dropdownElement && dropdownElement.contains(activeElement))) {
                isInsideInputOrDropdown = true;
                break;
              }
              activeElement = activeElement.parentNode;
            }
            if (!isInsideInputOrDropdown) {
              this.filteredOptions = [];
            }
          }, 100);
}, 

代码在谷歌可以正常运行 但是发现在IE浏览器 中 写的固定高度 但是内容溢出 overflow 等都没有生效 待解决。