jQuery为input标签实现下拉选项筛选和选中功能
warning:
这篇文章距离上次修改已过189天，其中的内容可能已经有所变动。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery下拉筛选示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<input type="text" id="myInput" placeholder="输入名称筛选...">
<ul id="myUL">
<li data-value="Alice">Alice</li>
<li data-value="Bob">Bob</li>
<li data-value="Charlie">Charlie</li>
<!-- 更多列表项 -->
</ul>
<script>
$(document).ready(function(){
$("#myInput").on("keyup", function() {
var searchTerm = $(this).val().toLowerCase();
$("#myUL li").each(function(){
var lineStr = $(this).text().toLowerCase();
if(lineStr.indexOf(searchTerm) == -1){
$(this).hide();
}
else{
$(this).show();
}
});
});
});
</script>
</body>
</html>这段代码实现了一个简单的下拉筛选功能，用户可以在输入框中输入文本来过滤<ul>标签内的列表项。jQuery用于处理文本输入事件，并根据用户的输入显示或隐藏相应的列表项。
评论已关闭