keyup 功能突出显示正在输入的值

Question

在下面的 sn-p 中，当用户开始在输入字段中输入时，结果开始过滤。

现在我正在捕捉价值。当用户键入和擦除时，我想在跨度类周围附加值。这样我可以在输入时突出显示结果。

这是我目前所拥有的，使用追加路由是最好的方法吗？

这是我创建的 jsFiddle 的链接：https://jsfiddle.net/uvcLfed6/1/

$('#myInput').keyup(function() {
    var value = $(this).val().toLowerCase();
    //console.log('Value: ' + value);
    $(value).addClass("highlight");
    //$(value).css("background-color", "pink");
    $("#myDiv *").filter(function() {
        $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
});

.highlight {
    background-color: #FFFF33; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel = "stylesheet" type = "text/css" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />

```
<input class="form-control" id="myInput" type="text" placeholder="Search..">

<div id="myDiv">

  <div>
<h2>Title Here</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<p>
<p>Some text Here</p>
  </div>

  <div>
Aenean commodo ligula eget dolor. Aenean massa.
<pre>
    This is some some text here
    pre tag here with content <br> Hi
</pre>
  </div>

  <div>
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
  </div>

  <div>
Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate
  </div>

</div>
```

Answer 1

使用 .each ，.replace() 您可以实现这一目标

$('#myInput').on('input',function() {
    var value = $(this).val();
    
    // show / hide divs which contains the value
    // .hide() to hide all divs then .filter() to filter the divs contains the value then .show() it
    /*$("#myDiv > div").hide().filter(function() {
        return $(this).text().indexOf(value) > -1;
    }).show();*/
    
    // replace the string with `<span>`
    $("#myDiv > div").each(function() {    // loop through divs
        if($(this).text().indexOf(value) > -1){ // if this div contains value
          $(this).html($(this).text().replace(new RegExp(value , "g"), '<span class="highlight">'+value+'</span>'));  // wrap the value in highlight span then change the div `html` with the new value
          $(this).show();  // show the div
        }else{  // if not contains the value
          $(this).html($(this).text()); // return the div html to the text without spans
          $(this).hide(); // hide the div
        }
    });
});

.highlight {
    background-color: #FFFF33; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel = "stylesheet" type = "text/css" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />

<input class="form-control" id="myInput" type="text" placeholder="Search..">

<div id="myDiv">

  <div>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  </div>

  <div>
    Aenean commodo ligula eget dolor. Aenean massa.
  </div>

  <div>
    Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
  </div>

  <div>
    Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate
  </div>

</div>

$('#myInput').on('input',function() {
    var value = $(this).val().trim();
    
    $("#myDiv *").each(function(){
      var IsNested = !$(this).hasClass('toggle');
      if(IsNested === true){
        var reg = new RegExp(value , 'g');
        if($(this).text().indexOf(value) > -1){
          $(this).html($(this).text().replace(reg , '<span class="highlight">'+ value +'</span>'));
        }else{
          $(this).html($(this).html().replace('<span class="highlight">' , '').replace('</span>' , ''));
        }
       }else{
        
       }
    });
});

.highlight {
    background-color: #FFFF33; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel = "stylesheet" type = "text/css" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />

<input class="form-control" id="myInput" type="text" placeholder="Search..">

<div id="myDiv">

  <div class="toggle">
<h2>Title Here</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<p>
<p>Some text Here</p>
  </div>

  <div class="toggle">
Aenean commodo ligula eget dolor. Aenean massa.
<pre>
    This is some some text here
    pre tag here with content <br> Hi
</pre>
  </div>

  <div class="toggle">
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
  </div>

  <div class="toggle">
Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate
  </div>

</div>

Answer 2

您可以通过简单地将内部 html 作为字符串并将所有找到的结果替换为包装的 span 来实现。这样，您也可以保留html结构。

// save structure before use
var original = $("#myDiv").html();

// bind event
$('#myInput').keyup(function() {
  // get search value
  var value = $(this).val();

  // replace with original
  $("#myDiv").html(original);

  if (!value) {
    // if empty
    return;
  }

  // filter
  $("#myDiv *").filter(function() {
    return $(this).text().indexOf(value) > -1;
  }).each(function() {
  // wrap search term in span 
    $(this).html($(this).html().replace(value, "<span class='highlight'>" + value + "</span>"));
  });
});

.highlight {
  background-color: #FFFF33;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<input class="form-control" id="myInput" type="text" placeholder="Search..">

<div id="myDiv">

  <div>
    <h2>Title Here</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
      <p>
        <p>Some text Here</p>
  </div>

  <div>
    Aenean commodo ligula eget dolor. Aenean massa.
    <pre>
            This is some some text here
            pre tag here with content <br> Hi
        </pre>
  </div>

  <div>
    Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
  </div>

  <div>
    Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate
  </div>

</div>