Adding a text box with auto-complete

A common feature of many web forms is the ability to provide suggestions as the user types, based on a list of possible values. In this example, we enhance a standard HTML input text element with this feature.

This technique is useful in situations where we simply wish to offer suggestions to the user that they may or may not choose to select, that is, suggesting existing tags to be applied to a new blog post. They can either select a suggested value that matches one they have started typing, or simply continue typing a new, unused tag.

How to do it...

First, set up a basic Moodle page in the usual way. In this example, we create autocomplete.php with the following content:

<?php
require_once(dirname(__FILE__) . '/../config.php');
$PAGE->set_context(get_context_instance(CONTEXT_SYSTEM));
$PAGE->set_url('/cook/autocomplete.php');
$PAGE->requires->js('/cook/autocomplete.js', true);
?>
<?php
echo $OUTPUT->header();
?>
<div style...