【实习】vue input下拉及搜索功能

一个需求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的

 

                      v-model="parentid"
            placeholder="请输入:"
            class="input"
            @focus="showParent = true"
            @input="changeInput(parentid)"
            @blur="listBlur"
          />
         

           
• {{item}}

         

   

script的

css样式

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

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

---

---

2022.11.11  下午

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

改动标红

template的

                      v-model="parentid"
            placeholder="请输入:"
            class="input"
            @focus="changeInput(parentid),showParent = true"
            @blur="listBlur"
          />
         

           
• {{item}}

         

   

script的