选择框可输入可搜索查询下拉选项框（自定义）

最新推荐文章于 2023-07-04 10:49:10 发布

Melody–Zhang

最新推荐文章于 2023-07-04 10:49:10 发布

阅读量6.9k

点赞数

分类专栏：下拉框输入可搜索关键字

本文链接：https://blog.csdn.net/qq_15548121/article/details/81359471

版权

这段代码展示了如何创建一个可输入、可搜索查询的下拉选项框。它包括CSS样式，HTML结构以及JavaScript功能，支持输入关键词筛选选项，并且在选中后更新显示。这个组件适用于需要提供灵活查询选择的场景。

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

//css部分

jquery.splendid.textchange.js可以自己去下载

.searchSelectDiv {
margin: 0 50px 0 0;
height: 24px;
line-height: 24px;
width: 118px;
}

.searchSelect {
position: relative;
}

.searchSelect select {
width: auto;
font-size: 12px;
color: #464c5b;
outline: none;
padding: 2px 4px;
border: 1px solid #d7dde4;
position: absolute;
z-index: 22;
}

.searchSelect .search {
width:100%;
border-radius: 3px;
outline: none;
padding: 0 36px 0 4px;
line-height: 24px;
font-size: 12px;
color: #464c5b;
height: 24px;
border: 1px solid #d7dde4;
}

.opt {
background-color: #FFF;
}

.opt:hover {
background-color: #3399ff;
color: #FFF;
}

.searchSelect .arrowDown {
position: absolute;
right: 6px;
top: 6px;
border: 0;
width: 14px;
height: 24px;
display: inline-block;
text-align: center;
background: url('images/arrow.png') -12px -62px no-repeat;
}
//组件部分

<div class="searchSelectDiv lf"
     style="display: inline-block; margin-top: 3px; width: 220px;">
     <span id="conid" class="searchSelect"> <input type="text"