Question

因此，我创建了这个小的过滤器对象，以便在用户键入任何内容时过滤名称，但是我也需要做而我不能做的是，如何在用户键入内容时用任何背景色“标记”它？就像我希望用户搜索某些内容时以黄色显示文本。请检查以下代码：

谢谢

$(document).ready(function(){
    var $btns = $('.btn').click(function() {
        if (this.id == 'all') {
          $('#parent > div').fadeIn(450);
        } else {
          var $el = $('.' + this.id).fadeIn(450);
          $('#parent > div').not($el).hide();
        }
        $btns.removeClass('active');
        $(this).addClass('active');
      })
    
    var $search = $("#search").on('input',function(){
        $btns.removeClass('active');
        var matcher = new RegExp($(this).val(), 'gi');
        $('.box').show().not(function(){
            return matcher.test($(this).find('.h5text').text())
        }).hide();
    })
    
        var $search = $("#owner").on('input',function(){
        $btns.removeClass('active');
        var matcher = new RegExp($(this).val(), 'gi');
        $('.box').show().not(function(){
            return matcher.test($(this).find('.card-subtitle').text())
        }).hide();
    })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="bootstrap.min.css">
    <link href="css/simple-sidebar.css" type="text/css" rel="stylesheet">
</head>

<body>
<input type="text" id="search" class="form-control" placeholder="Search...">
<div class="parent m-3">
<div class="box">
    <h5 class="h5text">Teemo</h5>
</div>
<div class="box">
    <h5 class="h5text">Leona</h5>
</div>
<div class="box">
    <h5 class="h5text">Jax</h5>
</div>
<div class="box">
    <h5 class="h5text">Lucian</h5>
</div>
<div class="box">
    <h5 class="h5text">Jinx</h5>
</div>
</div>


<script src="jquery-3.2.1.min.js"></script>
<script src="filter.js"></script>
</body>

</html>

Answer 1

我只修改了var $search = $("#search").on('input',function(){函数，但这是一个解决方案。

每个<span>上都会有<div>，该文本将在您要查找的文本周围移动。

$(document).ready(function(){
    var $btns = $('.btn').click(function() {
        if (this.id == 'all') {
          $('#parent > div').fadeIn(450);
        } else {
          var $el = $('.' + this.id).fadeIn(450);
          $('#parent > div').not($el).hide();
        }
        $btns.removeClass('active');
        $(this).addClass('active');
      })
    
    var $search = $("#search").on('input',function(){
        $btns.removeClass('active');
        var matcher = new RegExp($(this).val(), 'gi');
        $('.box').show().not(function(){
          return matcher.test($(this).find('.h5text').text())
        }).hide();
        $('.box').each(function()
        {
    	  var html = $(this).find('.h5text').text();
          var text = $("#search").val();
          var index = html.toLowerCase().indexOf(text.toLowerCase());
          if (index >= 0) { 
            html = html.substring(0,index) + "<span style='background-color: yellow;'>" +html.substring(index,index+text.length) + "</span>" + html.substring(index + text.length);
            $(this).find('.h5text').html(html);
          }
        })
     })
    
        var $search = $("#owner").on('input',function(){
        $btns.removeClass('active');
        var matcher = new RegExp($(this).val(), 'gi');
        $('.box').show().not(function(){
            return matcher.test($(this).find('.card-subtitle').text())
        }).hide();
    })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="bootstrap.min.css">
    <link href="css/simple-sidebar.css" type="text/css" rel="stylesheet">
</head>

<body>
<input type="text" id="search" class="form-control" placeholder="Search...">
<div class="parent m-3">
<div class="box">
    <h5 class="h5text">Teemo</h5>
</div>
<div class="box">
    <h5 class="h5text">Leona</h5>
</div>
<div class="box">
    <h5 class="h5text">Jax</h5>
</div>
<div class="box">
    <h5 class="h5text">Lucian</h5>
</div>
<div class="box">
    <h5 class="h5text">Jinx</h5>
</div>
</div>


<script src="jquery-3.2.1.min.js"></script>
<script src="filter.js"></script>
</body>

</html>

突出显示搜索输入JQuery中的文本

1 个答案: