可搜索的下拉框

最新推荐文章于 2024-08-24 09:19:42 发布

岩崎理奈

最新推荐文章于 2024-08-24 09:19:42 发布

阅读量1.1k

点赞数

分类专栏： vue笔记

本文链接：https://blog.csdn.net/qq_41874847/article/details/95081201

版权

这篇博客介绍了如何创建一个可搜索的下拉框。通过将输入框与列表结合，利用CSS样式设置外观，实现点击时列表的显示和隐藏。作者使用JavaScript监听搜索框输入，动态调整显示的列表项，并在选择时将值赋给输入框，同时隐藏列表并清空检索。文章邀请读者分享更优实现方法。

摘要由CSDN通过智能技术生成

效果图

将输入框和列表结合在一起

 <div class="select-content">
                  <input type="text" readonly v-model="businessAdd.businessCustomerDetailDto.company" @click="selectDiv()" id="select_input" class="select-input" placeholder="请选择" />
                  <div class="sanjiao" @click="selectDiv()">
                    <span class="item dot-bottom"></span>
                  </div>
                  <div id="search_select" class="search-select">
                    <input type="text" class="select-input" v-model="selectValue" placeholder="输入检索" @blur="InputValue