我想搜索下方有这俩个字的li 之后让他们显示到下方 但是我没啥思路 不知道咋去筛选
有偿 可以提供代码
jq写法
JS 数组方法里面有个filter过滤方法你可以拿到搜索的内容然后去过滤显示下面展示的列表
以下答案由GPT-3.5大模型与博主波罗歌共同编写:
根据您的描述,您想搜索包含特定字词的复选框标签,并将它们显示在下方。可以使用以下jQuery代码来实现:
$(document).ready(function() {
$('.searchTxt').on('keyup', function() { // 当搜索文本框中的键被抬起时
var searchText = $(this).val().toLowerCase(); // 获取搜索文本框中的文本,并将其转为小写字母
$('label').each(function() { // 遍历所有的label
var labelTxt = $(this).text().toLowerCase(); // 获取当前label元素的文本,并将其转为小写字母
if (labelTxt.indexOf(searchText) !== -1) { // 判断是否包含搜索文本框中的字词
$(this).show(); // 如果包含,则显示该label元素
} else {
$(this).hide(); // 如果不包含,则隐藏该label元素
}
});
});
});
将上述代码放在页面的<head>
标签中,然后可以在搜索文本框中键入要搜索的字词,并通过jQuery来逐一遍历所有的label元素,判断是否包含该字词,如果包含则显示该元素,不包含则隐藏该元素。
如果我的回答解决了您的问题,请采纳!
该回答引用于gpt与OKX安生共同编写:
您可以使用 jQuery 的 filter()
方法来筛选下方的 li
标签,然后将它们显示到下方。以下是一个可能的实现:
$(document).ready(function() {
// 给搜索框绑定键盘抬起事件
$('.searchTxt').keyup(function() {
var searchText = $(this).val().toLowerCase(); // 获取搜索关键字并转为小写字母
var $targetLi = $('label').filter(function() { // 使用 filter() 方法筛选 li 标签
return $(this).text().toLowerCase().indexOf(searchText) >= 0; // 返回包含关键字的标签
});
$('#result').empty(); // 清空结果容器
if ($targetLi.length > 0) { // 如果有符合条件的标签
$('#result').append($targetLi); // 将标签添加到结果容器中
} else { // 如果没有符合条件的标签
$('#result').html('No matching result.'); // 显示提示信息
}
});
});
其中,$('label')
选择所有的 label
标签,.filter()
方法会遍历这些标签,并返回一个新的 jQuery 对象,包含满足筛选条件的标签。$('#result').empty()
会清空结果容器,$('#result').append($targetLi)
则会将 $targetLi
添加到结果容器中。
此外,您需要在 HTML 中增加一个结果容器(比如一个 div
标签),用于显示搜索结果。例如:
<div id="result"></div>