点击搜索 下方显示上方搜索内容的

img

img

我想搜索下方有这俩个字的li 之后让他们显示到下方 但是我没啥思路 不知道咋去筛选
有偿 可以提供代码

jq写法

已选择0个文件类别

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安生共同编写:
  • 该回答引用于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>
  • 如有用的话,还请采纳哦~