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.." >

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>

Answer 2

这是一个简单的解决方案

JQUERY

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

      $('#clear').click(function(){
        $('#myInput').val("");
          location.reload(); // To refresh the page
       })

    });

HTML

<input id="myInput" type="text" placeholder="Search..">
<button id="clear">Clear</button>

Answer 3

您不需要任何纯JavaScript或jQuery解决方案。您可以通过将“清除”按钮的type属性设置为reset来实现。检查以下代码段：

<form action="http://">
    <input name="text">
    <input name="clear" type="reset" value="&#215;">
</form>

编辑： 要重新加载页面：

<form action="http://">
    <input name="text">
    <input name="clear" type="reset" value="&#215;" onclick="window.location.reload(true);">
    // If we needed to pull the document from
    // the web-server again (such as where the document contents
    // change dynamically) we would pass the argument as 'true'.
</form>

向搜索输入框添加清除按钮

3 个答案: