显示/隐藏搜索结果的div

Question

我的搜索框下面有一个结果div，当不使用搜索时，我想隐藏它。如果我从div中删除填充和边框，那么它就会被隐藏，因为它是空的，但理想情况下我希望保留样式。如果我用style="display: none;"隐藏div，那么当结果显示时，div仍然是隐藏的，所以我假设我需要将javascript更改为"；取消隐藏"；div？不幸的是，我不知道在剧本中该怎么做。

HTML:
<div class="col div-parent">
<input type="text" class="form-control-sm border border-secondary" name="search-box" id="search-box" autocomplete="off"
placeholder="Search ...">
<div class="result div-child bg-gray-200 pt-3 px-3 text-sm border border-secondary rounded-3"></div>
</div>

Javascript:
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#search-box').on("keyup input", function(){
/* Get input value on change */
var inputVal = $(this).val();
var resultDropdown = $(this).siblings(".result");
if(inputVal.length) {
$.get("ajax-live-search.php?rID=<?php echo $region; ?>&oID=2", {term: inputVal}).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();
});
});
</script>

Answer 1

这就是您想要的吗

var underSearchbar = document.getElementById("underSearchbar");
/*hide at the beginning*/
underSearchbar.style.display = "none";
$(document).ready(function () {
$('#search-box').on("keyup input", function () {
/* show div on input */
underSearchbar.style.display = "block";
/* Get input value on change */
var inputVal = $(this).val();
var resultDropdown = $(this).siblings(".result");
if (inputVal.length) {
$.get("ajax-live-search.php?rID=<?php echo $region; ?>&oID=2", { term: inputVal }).done(function (data) {
// Display the returned data in browser
resultDropdown.html(data);
});
} else {
resultDropdown.empty();
/* hide again if empty */
underSearchbar.style.display = "none";
}
});
// 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();
});
});

<div class="col div-parent">
<input type="text" class="form-control-sm border border-secondary" name="search-box" id="search-box"
autocomplete="off" placeholder="Search ...">
<div class="result div-child bg-gray-200 pt-3 px-3 text-sm border border-secondary rounded-3" id="underSearchbar"></div>
</div>

Answer 2

这可能不是最干净的方法，但你不能在result元素上没有输入时只使用fadeOut((函数，在有输入值时使用fadeIn((函数。这应该能满足你的要求，不是吗？

这是文件。

这样的东西会在默认情况下隐藏它(因为没有输入(，并在有输入时显示它。我希望这能帮助

if(inputVal.length) {
$.get("ajax-live-search.php?rID=<?php echo $region; ?>&oID=2", {term: inputVal}).done(function(data){
// Display the returned data in browser
resultDropdown.html(data);
$("#yourelement").fadeIn();
});
} else {
resultDropdown.empty();
$("#yourelement").fadeOut();
}

Answer 3

也许你应该使用visibility: hidden;而不是display: None，如果你想让结果占位符(.result(保持显示，那么不要直接把结果数据扔进去，而是把它放在里面的第二个div中，你可以根据你的标准随时显示和删除，如果你能告诉我们你显示和隐藏结果的标准，我也许能给你提供代码。

Answer 4

我不太确定，但这可能有助于

<div class="col div-parent">
<input type="text" class="form-control-sm border border-secondary" name="search-box" id="search-box" autocomplete="off"
placeholder="Search ...">
<div class="result div-child bg-gray-200 pt-3 px-3 text-sm border border-secondary rounded-3"></div>
</div>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#search-box').on("keyup input", function(){
/* Get input value on change */
var inputVal = $(this).val();
var resultDropdown = $(this).siblings(".result");
if(inputVal.length) {
$.get("ajax-live-search.php?rID=<?php echo $region; ?>&oID=2", {term: inputVal}).done(function(data){
// Display the returned data in browser
resultDropdown.html(data);
});
} else {
resultDropdown.empty();
}
$('.result').css("display","block")
})
$('#search-box').focusout( function() {
$('.result').css("display","none")
});
// 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();
});
});
</script>

样式

<style>
.result {
display:none;
}
</style>