yicui/hint.js

## hint.js
$(document).ready(function(){
  var openText;
  $(".hint").keyup(function() {
    openText = $(this).next();
    if ($(this).val() == "")
      openText.empty();
    else
      $.get($(this).attr("href"),
        {
          input:$(this).val(),
          sid:Math.random()
        },
        function(data) { openText.append("span").text("Suggestions: " + data); });
  });
});

## hint.php
<?php
$name[]="Anna";
$name[]="Brittany";
$name[]="Cinderella";
$name[]="Diana";
$name[]="Eva";
$name[]="Fiona";
$name[]="Gunda";
$name[]="Hege";
$name[]="Inga";
$name[]="Johanna";
$name[]="Kitty";
$name[]="Linda";
$name[]="Nina";
$name[]="Ophelia";
$name[]="Petunia";
$name[]="Amanda";
$name[]="Raquel";
$name[]="Cindy";
$name[]="Doris";
$name[]="Eve";
$name[]="Evita";
$name[]="Sunniva";
$name[]="Tove";
$name[]="Unni";
$name[]="Violet";
$name[]="Liza";
$name[]="Elizabeth";
$name[]="Ellen";
$name[]="Wenche";
$name[]="Vicky";

$input = $_GET["input"];

if (strlen($input) > 0) {
  $hint = "";
  for($i = 0; $i < count($name); $i ++) {
    if (strtolower($input) == strtolower(substr($name[$i], 0, strlen($input)))) {
      if ($hint == "") $hint = $name[$i];
      else $hint = $hint." , ".$name[$i];
    }
  }
}
//Set output to "no suggestion" if no hint were found
if ($hint == "") $hint = "no suggestion";
echo $hint;
?>

## htmlbasics.html
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" lang="en-us">
<head>
  <title>Introduction to HTML</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <meta name="keywords"  content="web, tags, forms, anchors" />
  <meta name="description" content="basic HTML concepts" />
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
  <script type="text/javascript" src="hint.js"></script>
</head>

<body>
  <h1>Introduction to HTML</h1>
  <h2>This webpage showcases some basic HTML concepts</h2>
  <h3>Lecturer: Yi Cui</h3>

  <h4><a id="paragraphs">Paragraphs</a></h4>
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
    <p align='center'>This paragraph is placed at the center of the page.</p>
    <hr />
    <p>This paragraph has a horizontal bar above and another one below</p>
    <hr />
    <p>This is<br />a para<br />graph with line breaks</p>
    <! This is a comment which is invisible in the browser>

  <h4><a id="formatting">Formating Texts (some tags are deprecated)</a></h4>
    <b>This text is bold</b><br />
    <strong>This text is strong</strong><br />
    <big>This text is big</big><br />
    <em>This text is emphasized</em><br />
    <i>This text is italic</i><br />
    <small>This text is small</small><br />
    This text contains<sub>subscript</sub><br />
    This text contains<sup>superscript</sup>

  <h4><a id="tables">Tables (bgcolor attribute is deprecated)</a></h4>
    <table border="1">
      <tr>
        <th>Heading 1</th><th>Heading 2</th>
      </tr>
      <tr>
        <td>row 1, cell 1</td> <td>row 1, cell 2</td>
      </tr>
      <tr>
        <td>row 2, cell 1</td> <td>row 2, cell 2</td>
      </tr>
    </table>
    <br />
    <table bgcolor="red" border="1">
      <tr>
        <td>This table's background color is red</td>
      </tr>
    </table>
    <br />
    <table bgcolor="blue" border="1">
      <tr>
        <td>This table's background color is blue</td>
      </tr>
    </table>

  <h4><a id="inputs">Form and Input Elements</a></h4>
    <form>
      First name: <input type="text" name="firstname" class="hint" href="hint.php"/><p></p>
      Last name: <input type="text" name="lastname" /><br />
      <input type="radio" name="sex" value="male" /> Male <br />
      <input type="radio" name="sex" value="female" /> Female <br />
      <input type="checkbox" name="junior" /> I am a junior student<br />
      <input type="checkbox" name="senior" /> I am a senior student
    </form>
    <form name="input" action="fake_form_action.php" method="get">
      Action: <input type="text" name="user" />
      <input type="submit" value="Submit" />
    </form>

  <h4><a id="anchors">Anchors</a></h4>
    <p><a href="http://en.wikipedia.org">This anchor element</a> points to Wikipedia,
    and clicking on <a href="http://en.wikipedia.org" target="_blank">this link</a> will open a new page to Wikipedia</p>
    <p><a href="#paragraphs">Skip to the Paragraphs section</a></p>
    <p><a href="#formatting">Skip to the Formating Texts section</a></p>
    <p><a href="#tables">Skip to the Tables section</a></p>
    <p><a href="mailto:yi.cui@vanderbilt.edu?subject=Hello">Send me Email</a></p>

  <h4>Styles</h4>
    <h2 style="background-color:red">This heading's background color is red</h2>
    <p style="background-color:green">This paragraph's background color is green.</p>
    <p style="font-family:arial;color:red;font-size:20px">This paragraph is of the 20px Arial font and in the red color.</p>

</body>
</html>
	$(document).ready(function(){
	var openText;
	$(".hint").keyup(function() {
	openText = $(this).next();
	if ($(this).val() == "")
	openText.empty();
	else
	$.get($(this).attr("href"),
	{
	input:$(this).val(),
	sid:Math.random()
	},
	function(data) { openText.append("span").text("Suggestions: " + data); });
	});
	});
	<?php
	$name[]="Anna";
	$name[]="Brittany";
	$name[]="Cinderella";
	$name[]="Diana";
	$name[]="Eva";
	$name[]="Fiona";
	$name[]="Gunda";
	$name[]="Hege";
	$name[]="Inga";
	$name[]="Johanna";
	$name[]="Kitty";
	$name[]="Linda";
	$name[]="Nina";
	$name[]="Ophelia";
	$name[]="Petunia";
	$name[]="Amanda";
	$name[]="Raquel";
	$name[]="Cindy";
	$name[]="Doris";
	$name[]="Eve";
	$name[]="Evita";
	$name[]="Sunniva";
	$name[]="Tove";
	$name[]="Unni";
	$name[]="Violet";
	$name[]="Liza";
	$name[]="Elizabeth";
	$name[]="Ellen";
	$name[]="Wenche";
	$name[]="Vicky";

	$input = $_GET["input"];

	if (strlen($input) > 0) {
	$hint = "";
	for($i = 0; $i < count($name); $i ++) {
	if (strtolower($input) == strtolower(substr($name[$i], 0, strlen($input)))) {
	if ($hint == "") $hint = $name[$i];
	else $hint = $hint." , ".$name[$i];
	}
	}
	}
	//Set output to "no suggestion" if no hint were found
	if ($hint == "") $hint = "no suggestion";
	echo $hint;
	?>
	<!DOCTYPE html>

	<html xmlns="http://www.w3.org/1999/xhtml" lang="en-us">
	<head>
	<title>Introduction to HTML</title>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<meta name="keywords" content="web, tags, forms, anchors" />
	<meta name="description" content="basic HTML concepts" />
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
	<script type="text/javascript" src="hint.js"></script>
	</head>

	<body>
	<h1>Introduction to HTML</h1>
	<h2>This webpage showcases some basic HTML concepts</h2>
	<h3>Lecturer: Yi Cui</h3>

	<h4><a id="paragraphs">Paragraphs</a></h4>
	<p>This is a paragraph.</p>
	<p>This is another paragraph.</p>
	<p align='center'>This paragraph is placed at the center of the page.</p>
	<hr />
	<p>This paragraph has a horizontal bar above and another one below</p>
	<hr />
	<p>This is<br />a para<br />graph with line breaks</p>
	<! This is a comment which is invisible in the browser>

	<h4><a id="formatting">Formating Texts (some tags are deprecated)</a></h4>
	<b>This text is bold</b><br />
	<strong>This text is strong</strong><br />
	<big>This text is big</big><br />
	<em>This text is emphasized</em><br />
	<i>This text is italic</i><br />
	<small>This text is small</small><br />
	This text contains<sub>subscript</sub><br />
	This text contains<sup>superscript</sup>

	<h4><a id="tables">Tables (bgcolor attribute is deprecated)</a></h4>
	<table border="1">
	<tr>
	<th>Heading 1</th><th>Heading 2</th>
	</tr>
	<tr>
	<td>row 1, cell 1</td> <td>row 1, cell 2</td>
	</tr>
	<tr>
	<td>row 2, cell 1</td> <td>row 2, cell 2</td>
	</tr>
	</table>
	<br />
	<table bgcolor="red" border="1">
	<tr>
	<td>This table's background color is red</td>
	</tr>
	</table>
	<br />
	<table bgcolor="blue" border="1">
	<tr>
	<td>This table's background color is blue</td>
	</tr>
	</table>

	<h4><a id="inputs">Form and Input Elements</a></h4>
	<form>
	First name: <input type="text" name="firstname" class="hint" href="hint.php"/><p></p>
	Last name: <input type="text" name="lastname" /><br />
	<input type="radio" name="sex" value="male" /> Male <br />
	<input type="radio" name="sex" value="female" /> Female <br />
	<input type="checkbox" name="junior" /> I am a junior student<br />
	<input type="checkbox" name="senior" /> I am a senior student
	</form>
	<form name="input" action="fake_form_action.php" method="get">
	Action: <input type="text" name="user" />
	<input type="submit" value="Submit" />
	</form>

	<h4><a id="anchors">Anchors</a></h4>
	<p><a href="http://en.wikipedia.org">This anchor element</a> points to Wikipedia,
	and clicking on <a href="http://en.wikipedia.org" target="_blank">this link</a> will open a new page to Wikipedia</p>
	<p><a href="#paragraphs">Skip to the Paragraphs section</a></p>
	<p><a href="#formatting">Skip to the Formating Texts section</a></p>
	<p><a href="#tables">Skip to the Tables section</a></p>
	<p><a href="mailto:yi.cui@vanderbilt.edu?subject=Hello">Send me Email</a></p>

	<h4>Styles</h4>
	<h2 style="background-color:red">This heading's background color is red</h2>
	<p style="background-color:green">This paragraph's background color is green.</p>
	<p style="font-family:arial;color:red;font-size:20px">This paragraph is of the 20px Arial font and in the red color.</p>

	</body>
	</html>