CSc 337 - Web Programming > Assignments > Assignment 11

Due: 5 Mar 2012, 11:59pm

Create an "auto-suggestion" feature using AJAX to communicate with server-side logic in order to look up possible suggestions in your database, similar to Google's auto-suggest.

In this assignment, you'll be developing auto-suggestion functionality for a general text box. As characters are typed into the text box, the text that has been typed so far should be submitted to the server, which will then look up any search terms that begin with what has been typed. These terms should be sent back to the client so that they can see them displayed below the text box---all without reloading the page. Finally, if the user clicks on a term that appears in the auto-suggest list, their search box should be completed with that term.

1. The page should have a text box to type search terms into and a div immediately underneath it to contain auto-suggest terms. This page should be called search.php.
2. Whenever input is entered into the text box, the input should be submitted to a script named getterms.php, which searches for terms in the database that begin with that input.
3. The output of getterms.php should include the first five suggestions found and should be encoded in JSON.
4. Any terms found in the database should then appear in the div underneath the text box.
5. If you click on any term in the suggestion div, the text box contents should complete with that term.
6. Your database only needs one table. That table should be named search_terms and only needs one column, named terms.

To search MySQL for text that starts with something, use the LIKE keyword with the % wildcard (WHERE column LIKE "text%"). You can concatenate your query with the % symbol using LIKE CONCAT (:search, '%') or by concatenating them in PHP before passing them into the query.

To encode a PHP array with JSON to send to the client, use json_encode.

To evaluate a JSON response (in JavaScript), use:

eval('(' + response + ')');

To run a JavaScript function whenever input in a text box has changed, use the oninput event handler.

You are required to use PHP's PDO functionality for MySQL, not the older (and deprecated) mysql_ functions.

As before, external libraries are still not allowed.

As detailed on the homework submission page, this homework must be on the class web server in a folder titled homework11 for it to be graded.