Search results without pressing enter or submit

Question

I'm doing a search page that takes information from a database. I want a search that is something like the one from http://designspiration.net/ website.

So what I want is that it shows results without pressing enter or submit so it shows suggestions according to the letters written.

I have something like this so far:

   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>

If I add a submit button it works, but I can't make it work without it. Thank you for your help :)

You can attach the query to an onchange event in your textarea if it is part of a form. Maybe sure the query is fast. There are other libraries which provide different text controls supporting change events. — adamdc78, Dec 27 '14 at 20:33
mysql_ functions are deprecated, please use [mysqli](http://php.net/manual/en/book.mysqli.php) or [PDO](http://php.net/manual/tr/book.pdo.php) instead of mysql_ functions. — salep, Dec 27 '14 at 20:34
You will need some JavaScript to make this work. Make sure to keep the submit button too and hide it using JavaScript (if you want to hide it at all), otherwise people won't be able to search at all if the script doesn't work. — GolezTrol, Dec 27 '14 at 20:35
**Danger**: You are using [an **obsolete** database API](http://stackoverflow.com/q/12859942/19068) and should use a [modern replacement](http://php.net/manual/en/mysqlinfo.api.choosing.php). You are also **vulnerable to [SQL injection attacks](http://bobby-tables.com/)** that a modern API would make it easier to [defend](http://stackoverflow.com/questions/60174/best-way-to-prevent-sql-injection-in-php) yourself from. — Quentin, Dec 27 '14 at 20:38

score 2 · Accepted Answer · edited May 23 '17 at 11:57

What you are referring to is a client side operation and can not be achieved with php, html and mysql only. It's basically a JavaScript question.

You should start by taking a look at jQuery UI's autocomplete feature or if you want to build your own mechanism here are some clues:

You need to detect when the text input is being changed, so you can start the query whenever the phrase is updated. You can do so using either input/change event or keydown/keyup/keypress.

It would be nice to wait for the user to stop typing before asking your server for doing database operation, here's how you can detect end of an input: How to trigger an event in input text after I stop typing/writing?

You need to constantly comunicate with the server using ajax and nicely process returned data.

Search results without pressing enter or submit

1 Answers1