无需按回车或提交即可搜索结果答案

【问题标题】：Search results without pressing enter or submit无需按回车或提交即可搜索结果
【发布时间】：2015-02-24 14:18:53
【问题描述】：

我正在做一个从数据库中获取信息的搜索页面。我想要一个类似于 http://designspiration.net/ 网站的搜索。

所以我想要的是它无需按 Enter 或提交即可显示结果，因此它会根据所写的字母显示建议。

到目前为止，我有这样的事情：

   div class="container">
        <div class="row">
            <div class="col-md-10">
                <form action="#" method="POST">
                    <textarea name="search"></textarea>
                    <input type="submit" name="enter_search" >
                </form>
            </div>
        </div>

        <?php

        if (isset($_POST['enter_search'])) {
            $name = $_POST['search'];

            $sql = <<<SQL
            SELECT `name`
            FROM `teachers`
            WHERE `name` LIKE '%{$name}%'
SQL;

            if(!$result = $con->query($sql)){
                die('There was an error running the query [' . $con->error . ']');
            }

            while($row = $result->fetch_array()){
                echo $row['name'] . '<br />'; }
            }

            ?>


            </div>

如果我添加一个提交按钮，它可以工作，但没有它我无法让它工作。谢谢你的帮助:)

【问题讨论】：

如果它是表单的一部分，您可以将查询附加到 textarea 中的 onchange 事件。也许确定查询很快。还有其他库提供支持更改事件的不同文本控件。
mysql_ 函数已弃用，请使用mysqli 或PDO 代替mysql_ 函数。
您需要一些 JavaScript 才能完成这项工作。确保也保留提交按钮并使用 JavaScript 将其隐藏（如果您想完全隐藏它），否则如果脚本不起作用，人们将根本无法搜索。
危险：您使用的是an obsolete database API，应该使用modern replacement。您还容易受到SQL injection attacks的影响，现代 API 可以让您更轻松地从 defend 中获得。

标签： php html mysql

【解决方案1】：

您指的是客户端操作，仅通过php、html 和mysql 无法实现。这基本上是一个 JavaScript 问题。

你应该先看看jQuery UI's autocomplete feature，或者如果你想建立自己的机制，这里有一些线索：

您需要检测文本输入何时发生更改，以便在短语更新时启动查询。您可以使用input/change 事件或keydown/keyup/keypress 来执行此操作。

在请求您的服务器进行数据库操作之前等待用户停止输入会很好，以下是您可以检测输入结束的方法：How to trigger an event in input text after I stop typing/writing?

您需要不断地使用 ajax 与服务器通信并很好地处理返回的数据。

【讨论】：