根据输入字段一一显示 3 个 div

Question

我想制作一个搜索表单。在这里，当用户单击输入字段时，首先显示一个 div (id: 1)，其中将有一些链接，然后当用户在输入字段上键入时，首先搜索 div (id: 1) 将隐藏，第二个 div (id: 2)会显示那个地方。这里将显示搜索结果。之后，选择一个搜索结果，这里会出现第三个div（id:3）。在这个过程中，如果用户在窗口外点击，div 就会隐藏。 如需参考，请访问本网站并查看搜索表。 https://www.immobiliare.it/

这是我的代码：

<div id="1">
    <button>Open Map in Modal</button>
    <button>Open Map in Modal 2</button>
</div>
<div id="2">
    <p>Search result</p>
    <p>Search result</p>
    <!-- this will fetch result via AJAX, try with static data for testing. just show the div -->
</div>
<div id="3">
    <input type="checkbox"> Villa
    <input type="checkbox"> Apartment
    <input type="checkbox"> Cotage
</div>

<style>

#1{
    display: none;
}
#2{
    display: none;
}
#3{
    display: none;
}

.form-group input::focus + #1{
    display: block;
}

<script>
  var input = document.getElementById('searchLocation');
 var result = document.getElementById('2');
    input.addEventListener('keypress', function() {
    result.style.display = "block";
      });
    input.addEventListener('focusout', function() {
     result.style.display = "none";
      });
</script>

我尝试了焦点进出方法。但问题是我无法点击 div 内容，因为焦点不在，div 隐藏了。

请看参考链接，我想做类似的。我只需要设计。

Answer 1

    <!-- <form> -->
        <input type="search" placeholder=" Search..." id="searchbox" name="searchitem" list="searchhints">
    <!-- </form> -->
    <datalist id="searchhints"> 
    <!--        <option>Open Map in Modal 1</option>
        <option>Open Map in Modal 2</option> -->
    </datalist>
    <div id="display">
        <input type="checkbox"> Villa
        <input type="checkbox"> Apartment
        <input type="checkbox"> Cottage
    </div>

<script>
    var default_datalist = {"Open Map in Modal 1" : "modal1", "Open Map in Modal 2" : "modal2"};
    var searched_datalist = {"Search result 1": "search1", "Search result 2": "search2"};
    $(function(){
        $("#display").hide();
        fill_searchhints(default_datalist);
    })


    function fill_searchhints(datalist) {
        $("#searchhints").html("");
        for (let data in datalist) {
            $("#searchhints").append("<option><div id='"+datalist[data]+"'>"+data+"</div></option");
        }
    }


    $("body").delegate("#searchbox","change input",function(event){
        event.preventDefault();
        if($("#searchbox").val()!=''){
            keyword = $('#searchbox').val();
            //send keyword to AJAX function
            fill_searchhints(searched_datalist);

            if(keyword == 'Search result 1'){
                event.preventDefault();
                $("#display").show();
            }
            
        } else {
            fill_searchhints(default_datalist);
        }
    });
</script>

你可以沿着这条路线做一些事情。在这里，我使用了datalist 标签而不是 div。在脚本中，我创建了 default_datalist 和 searched_datalist 来替换 HTML 中的 datalist。 Rest 是普通函数、循环和事件监听器。

您提供的链接似乎也主要使用 AJAX 和后端搜索，所以在这里复制相同的结果有点困难

编辑：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="search" name="search" id="search">
<div id="div1" class="drop" hidden>
    <button>Open Map in Modal</button>
    <button>Open Map in Modal 2</button>
</div>
<div id="div2" class="drop" hidden>
    <p>Search result</p>
    <p>Search result</p>
</div>
<div id="div3" hidden>
    <input type="checkbox"> Villa
    <input type="checkbox"> Apartment
    <input type="checkbox"> Cottage
</div>
<script>
    $("#search").on("focusin input change", function(){
        $(".drop").hide();
        if($("#search").val() == ""){
            $("#div1").show();
              //    $("#div3").hide();
        } else {
            $("#div2").show();
        }
    })

    $("#search").on("focusout", function() {
        $(".drop").hide();
    })

    $("#div2").on("mousedown", function(){
        $("#div3").show();
    });
</script>

这里，如果应用注释部分，输入文本为空时#div3会隐藏，