Question

所以，我正在创建一个网站，我需要在用户搜索搜索栏中的内容后显示一个结果框，其中包含可能结果列表。它是这样的：http://s24.postimg.org/4qqgz0t6d/Sem_T_tulo.png

结果框仅在用户点击＆＃34;搜索＆＃34;按钮。我只是在寻找使该框出现的javascript代码。搜索算法是我认为我可以处理的另一个问题。你们知道一些可以帮助我的东西吗？至少我可以从哪里开始...... 感谢。

Answer 1

这应该让你走上正确的道路：

    <!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>

您显然必须处理所有与搜索相关的事件，但这演示了如何在提交后显示结果容器。我还建议使用诸如http://jquery.com/之类的javascript框架，尤其是如果您要使用AJAX来动态生成结果。

在搜索栏后显示结果框

1 个答案: