jquery搜索垂直模拟select下拉效果(jQuery垂直居中显示效果)
- 建站教程
- 2024-10-11 19:38:01
jquery搜索垂直模拟select下拉效果(jQuery垂直居中显示效果)
jquery搜索 select下拉 jquery垂直 jquery下拉 jquery特效 jquery下载
要实现jQuery搜索垂直模拟select下拉效果，可以使用以下代码：
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery 垂直模拟 Select 下拉效果</title>
<style>
.search-select {
position: relative;
display: inline-block;
}
.search-select input {
padding-right: 20px;
}
.search-select ul {
position: absolute;
list-style: none;
padding: 0;
margin: 0;
background-color: #fff;
border: 1px solid #ccc;
max-height: 200px;
overflow-y: auto;
display: none;
}
.search-select li {
padding: 5px 10px;
cursor: pointer;
}
.search-select li:hover {
background-color: #f1f1f1;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div>
<input type="text" placeholder="搜索...">
<ul>
<li data-value="1">选项1</li>
<li data-value="2">选项2</li>
<li data-value="3">选项3</li>
<li data-value="4">选项4</li>
<li data-value="5">选项5</li>
</ul>
</div>
<script>
$(function() {
var $searchSelect = $('.search-select');
var $input = $searchSelect.find('input');
var $ul = $searchSelect.find('ul');
var $lis = $ul.find('li');
$input.on('input', function() {
var searchText = $(this).val().toLowerCase();
$lis.each(function() {
var text = $(this).text().toLowerCase();
if (text.indexOf(searchText) !== -1) {
$(this).show();
} else {
$(this).hide();
}
});
$ul.show();
});
$lis.on('click', function() {
var value = $(this).data('value');
$input.val($(this).text());
$ul.hide();
});
$(document).on('click', function(e) {
if (!$(e.target).closest($searchSelect).length) {
$ul.hide();
}
});
});
</script>
</body>
</html>
```
这段代码创建了一个垂直模拟的select下拉效果，用户可以在输入框中输入文字进行搜索，搜索结果会显示在下拉列表中。点击列表中的选项后，输入框的值会被更新为所选选项的文本。
jQuery垂直居中显示效果，jQuery垂直滚动预览菜单，jquery搜索垂直模拟select下拉效果，jquery+css3弹性动感下拉菜单，
jquery搜索垂直模拟select下拉效果(jQuery垂直居中显示效果)由讯客互联建站教程栏目发布，感谢您对讯客互联的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人网站或者朋友圈，但转载请说明文章出处“jquery搜索垂直模拟select下拉效果(jQuery垂直居中显示效果)”
