javascript - 在搜索输入框中添加清除按钮

Question

我有一个动态搜索输入框，我想添加一个清除内容按钮，但不知道如何执行此操作。我已经尝试了很多我在这里找到的代码，但似乎没有一个有效。这是我的代码。

$(document).ready(function(){
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myTable tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});

<input id="myInput" type="text" placeholder="Search.." >

标签： javascripthtml

Answer 1

您可以使用 jquery 的.val()方法。

$(document).ready(function() {
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myTable tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
  $("#clearButton").on("click", function() {

    $("#myInput").val("");
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<input id="myInput" type="text" placeholder="Search..">
<button id="clearButton">
clear
</button>