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>

请注意，仅在代码段编辑器中看不到突出显示的颜色时，我才对其进行修改。

搜索功能未清除

1 个答案: