Javascript 在搜索栏后显示结果框_Javascript

Javascript 在搜索栏后显示结果框

javascript

Javascript 在搜索栏后显示结果框,javascript,Javascript,因此，我正在创建一个网站，我需要在用户在搜索栏中搜索某些内容后，显示一个结果框，其中包含可能的结果列表。是这样的：结果框仅在用户单击“搜索”按钮后出现。我只是在寻找使该框出现的javascript代码。搜索算法是我认为我能处理的另一个问题。你们知道什么可以帮我吗？至少我可以从这里开始。。。谢谢。这会让你走上正确的道路： <!DOCTYPE html> <html> <head> <styl

因此，我正在创建一个网站，我需要在用户在搜索栏中搜索某些内容后，显示一个结果框，其中包含可能的结果列表。是这样的：

结果框仅在用户单击“搜索”按钮后出现。我只是在寻找使该框出现的javascript代码。搜索算法是我认为我能处理的另一个问题。你们知道什么可以帮我吗？至少我可以从这里开始。。。

谢谢。

这会让你走上正确的道路：

    <!DOCTYPE html>
    <html>
        <head>
            <style>
                #results-container
                {
                    height:200px;
                    width:400px;
                    border:1px solid #A9A9A9;
                }
            </style>
        </head>
        <body>
            <form action="#">
                <input type="text" />
                <button id="search-button" type="submit">Search</button>
            </form>
            <div id="results-container" style="display:none;">
                Results go in here.
            </div>
            <script>
                document.getElementById("search-button").addEventListener("click", function(e){
                e.preventDefault();
                document.getElementById("results-container").style.display = 'block';
            });
            </script>
        </body>
    </html>


#结果容器
{
高度：200px；
宽度：400px；
边框：1px实心#A9A9；
}
搜寻
结果在这里。
document.getElementById（“搜索按钮”）.addEventListener（“单击”），函数（e）{
e、 预防默认值（）；
document.getElementById（“结果容器”）.style.display='block'；
});

显然，您必须处理所有与搜索相关的事件，但这将演示如何在提交后显示结果容器。我还建议使用javascript框架，尤其是在使用AJAX动态生成结果时

好的开始是，这正是我想要的。谢谢