搜索结果div显示/隐藏问题：保留样式实现动态显隐

步骤1：修改HTML，给结果div添加初始隐藏样式 #

直接给.result容器加上style="display: none;"，页面加载时它会默认隐藏，但padding、border这些样式会完整保留。

修改后的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" style="display: none;"></div>
</div>

步骤2：修改JavaScript，控制结果div的显示与隐藏 #

需要在三个关键节点调整逻辑，确保容器的显示/隐藏和搜索状态匹配：

1. 输入框有内容时，先显示容器再加载搜索结果
2. 输入框内容清空时，清空容器内容并隐藏
3. 点击搜索结果项后，填充输入框并隐藏容器

修改后的JS代码：

<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(){
            var inputVal = $(this).val();
            var resultDropdown = $(this).siblings(".result");
            if(inputVal.length) {
                // 先显示结果容器，再加载AJAX数据
                resultDropdown.show();
                $.get("ajax-live-search.php?rID=<?php echo $region; ?>&oID=2", {term: inputVal}).done(function(data){
                    resultDropdown.html(data);
                });
            } else {
                // 清空内容并隐藏容器
                resultDropdown.empty().hide();
            }
        });
        // 点击结果项后，填充输入框并隐藏容器
        $(document).on("click", ".result p", function(){
            // 修正父容器选择器：原代码的.search-box不存在，改为实际的.div-parent
            $(this).parents(".div-parent").find('input[type="text"]').val($(this).text());
            $(this).parent(".result").empty().hide();
        });
    });
</script>

关键修改说明 #

• resultDropdown.show()：在发起AJAX请求前先显示容器，保证返回的搜索结果能在带样式的容器里展示
• resultDropdown.empty().hide()：输入框为空时，同时完成清空内容和隐藏容器的操作
• 修正了点击事件里的父容器选择器：原代码的.search-box在你的HTML结构中不存在，改为实际的.div-parent才能正确定位输入框

内容的提问来源于stack exchange，提问作者Rayza