对不起,我一定错过了一些非常基本的东西。 我想在搜索后清除结果 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"/>
<input id="reset" type="reset" name="reset" value="Reset"/>
<div class="result">Test</div>
</div>
</form>
当我在数据库中查询结果时
或
但是当我点击重置时
搜索框已重置,但搜索结果仍然存在
谢谢。
检查此示例(相应地检查并调整其余代码(:-
$('.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"/>
<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"/>
<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>