搜索功能未清除

Question

我有这个搜索功能，突出显示输入文本，我想清除另一个按钮点击输入值。我尝试了多种功能，包括

$('#searchInput').val("");

上面清除了输入字段，但没有清除DOM中突出显示的文本。任何建议，将不胜感激。谢谢。

$(document).ready(function() {
  $("#searchInput").on("keyup change", function(e) {
    var text = $.trim($(this).val());
    if (text !== "" && text !== " ") {
      var pattern = new RegExp(text, "gi");
    } else {
      $(".accordian-holder").removeClass("displayNone");
      $(".accordian-holder")
        .children("article")
        .removeClass("displayNone");
    }
    $(".searchtext, .searchtabsheading").each(function(i) {
      var str = this;
      var orgText = $(str).text();
      orgText = orgText.replace(pattern, function($1) {
        return (
          "<span style='color: rgb(53, 53, 53); background: rgb(255, 255, 255);'>" +
          $1 +
          "</span>"
        );
      });
      $(str).html(orgText);
    });
  });
});

Answer 1

实现这一目标的最简单方法是将class放在你追加的span上。然后，当你想清除突出显示时，你可以选择span，只需选择unwrap()的内容。试试这个：

$("#searchInput").on("keyup change", function(e) {
  var text = $.trim($(this).val());
  if (text !== "" && text !== " ") {
    var pattern = new RegExp(text, "gi");
  } else {
    $(".accordian-holder, .accordian-holder article").removeClass("displayNone");
  }
  
  $(".searchtext, .searchtabsheading").each(function(i) {
    var str = this;
    var orgText = $(str).text();
    orgText = orgText.replace(pattern, function($1) {
      return '<span class="highlight">' + $1 + '</span>'
    });
    $(str).html(orgText);
  });
});

$('#clear').click(function() {
  $('#searchInput').val('');
  $('.highlight').contents().unwrap();
});

.highlight {
  color: #C00;
  background-color: #CC0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="searchInput"  />
<button type="button" id="clear">Clear</button>
<div class="searchtext">
  Lorem ipsum dolor sit amet consectetur adipiscing elit. Lorem ipsum dolor sit amet consectetur adipiscing elit. Lorem ipsum dolor sit amet consectetur adipiscing elit. Lorem ipsum dolor sit amet consectetur adipiscing elit.
</div>

请注意，我修改了此示例的突出显示颜色，因为它们在代码段编辑器中不可见。