一个需求input实现下拉及搜索，实习练手不让用ui模板

首先百度得出2种方法，一个是input+select，一个是input+datalist

input组合select改css写js，最后bug太多放弃了

input+datalist直接成功了，list和id起一样名字就行了，看到有博客说datalist有的浏览器不适配

在datalist外面套select的，这里不多做赘述，datalist支持模糊查询，实时检索列表

但是需求让固定datalist在输入框下方，不让随意改变位置

我实现的效果这样，后来发现是浏览器的问题，edge是正常在下面但是大小不对，

Chrome在右边，左边随浏览器大小改变位置，Firefox在下面大小完全符合

但是导师说你不能决定客户用什么浏览器（o.o）

 dalalist的位置尝试了一上午没解决，甚至css设置也不起作用，想不通，最后发现几篇博客这么说

那么一切推翻，不用datalist了，直接用input+li

通过百度综合，实现了需求

template的

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

script的

<script>
export default {
  data() {
    return {
      parentid:null,//input绑定的v-model数据
      showParent: false, //下拉框显示
      parentList: ['中国电信天眼系统1', '电信天眼系统2', '中国电标天眼3', 
      '中国电标天眼系统4', '中国天眼6','中国天眼5', '电标天眼系统7',
      '中国电标天眼系统8', '电标天眼9'] 
    };
  },
  //模糊查询
  computed: {
    match() {
       if (this.parentid !== '') {
          return this.parentList.filter(item => item.includes(this.parentid))
          }
      return this.parentList
      }
    },
  //先提起保留一份
  mounted() {
    this.copyParent = this.parentList; 
  },
  methods: {
    //失去焦点隐藏下拉框
    listBlur() {
      setTimeout(() => {
        this.showParent = false;
      }, 200);
    },
    //得到焦点
    changeInput(val) {
      // this.parentList = this.copyParent.filter(item => {
      //   return item == val;
      // });
      //初始为空展示所有数据
      if (val == "" || val == null) {
        this.parentList = this.copyParent;
      }
    },
  },
};
</script>

css样式

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

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

      li {
        padding: 6px;
        cursor: pointer;
        text-align: center;
      }
    }
  }
  </style>

大体实现了功能，有一个bug，初始进入页面点击输入框没有下拉显示所有列表内容，

需要在输入框输入内容才能解锁全部功能

---

---

2022.11.11  下午

经过研究优化了一下，解决了刷新浏览器点击输入框不能下拉展示所有数据的bug

改动标红

template的

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

script的

<script>
export default {
  data() {
    return {
      parentid:'',//input绑定的v-model数据
      showParent: false, //下拉框显示
      parentList: ['中国电信天眼系统1', '电信天眼系统2', '中国电标天眼3', 
      '中国电标天眼系统4', '中国天眼6','中国天眼5', '电标天眼系统7',
      '中国电标天眼系统8', '电标天眼9'] 
    };
  },
  //模糊查询
  computed: {
    match() {
       if (this.parentid !== '') {
          return this.parentList.filter(item => item.includes(this.parentid))
          }
      return this.parentList
      }
    },
  //先提起保留一份
  mounted() {
    this.copyParent = this.parentList; 
  },
  methods: {
    //失去焦点隐藏下拉框
    listBlur() {
      setTimeout(() => {
        this.showParent = false;
      }, 200);
    },
    //得到焦点
    changeInput(val) {
      // this.parentList = this.copyParent.filter(item => {
      //   return item == val;
      // });
      //初始为空展示所有数据
      if (!val) {
        this.parentList = this.copyParent;
      }
    },
  },
};
</script>