php - Php Live MySQL 数据库搜索的清除结果 Div(非输入字段)

Question

抱歉，我一定错过了一些非常基本的东西。我想在搜索后清除结果 DIV。我可以使用按钮来完成此操作，或者更好的是，当输入字段被清除时。目前，如果我使用此重置按钮，输入字段将被重置，但结果 DIV 仍保留在屏幕上。

     $(document).ready(function(){
        $('.search-box input[type="text"]').on("keyup input", function(){
            /* Get input value on change */
            var term = $(this).val();
            var resultDropdown = $(this).siblings(".result");
            if(term.length){
                $.get("incl_php/backend-search.php", {query: term}).done(function(data){
                    // Display the returned data in browser
                    resultDropdown.html(data);
                });
            } else{
                resultDropdown.empty();
            }
        });
        
        // Set search input value on click of result item
        $(document).on("click", ".result p", function(){
            $(this).parents(".search-box").find('input[type="text"]').val($(this).text());
            $(this).parent(".result").empty();
        });
        });
        
        $("#reset").on("click", function() {
            $(".result").empty();
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form>
        <div class="search-box">
            <input type="text" autocomplete="off" placeholder="Search..." />
    		<input id="btn" type="button" value="Calculate" name="btn"/>&nbsp;&nbsp;
    		<input id="reset" type="reset" name="reset" value="Reset"/>		
            <div class="result">Test</div>    
    	</div>	
</form>

当我查询数据库的结果时

或者

但是当我点击重置

搜索框已重置，但搜索结果仍然保留

谢谢。

Answer 1

检查此示例(相应地检查并调整其余代码):-

$('.search-box input[type="text"]').on("keyup input", function(){
    var term = $(this).val();
    var resultDropdown = $(this).siblings(".result");
    if(term.length){
            resultDropdown.html(term);
    } else{
        resultDropdown.html('');
    }
});

// Set search input value on click of result item
$(document).on("click", ".result p", function(){
    $(this).parents(".search-box").find('input[type="text"]').val($(this).text());
    $(this).parent(".result").html('');
});

$("#reset").on("click", function() {
    $(".result").html('');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <div class="search-box">
      <input type="text" autocomplete="off" placeholder="Search..." />
      <input id="btn" type="button" value="Calculate" name="btn"/>&nbsp;&nbsp;
      <input id="reset" type="reset" name="reset" value="Reset"/>     
      <div class="result"></div>    
  </div>  
</form>

尝试一次此代码:-

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form>
        <div class="search-box">
            <input type="text" autocomplete="off" placeholder="Search..." />
            <input id="btn" type="button" value="Calculate" name="btn"/>&nbsp;&nbsp;
            <input id="reset" type="reset" name="reset" value="Reset"/>     
            <div class="result">Test</div>    
        </div>  
</form>
<script type = "text/javascript">
$(document).ready(function(){
    $('.search-box input[type="text"]').on("keyup input", function(){
        /* Get input value on change */
        var term = $(this).val();
        var resultDropdown = $(this).siblings(".result");
        if(term.length){
            $.get("incl_php/backend-search.php", {query: term}).done(function(data){
                // Display the returned data in browser
                resultDropdown.html(data);
            });
        } else{
            resultDropdown.html('');
        }
    });

    // Set search input value on click of result item
    $(document).on("click", ".result p", function(){
        $(this).parents(".search-box").find('input[type="text"]').val($(this).text());
        $(this).parent(".result").html('');
    });
});

$("#reset").on("click", function() {
    $(".result").html('');
});
</script>