今回はHTMLとJavaScriptを別々のファイルに分けて書いていきます。そしてJavaScriptとPhpを連結させて名前の予測リストを返すようにします。
ファンクションをJavaScriptに実装していきます。ファイル名はclienthint.jsとします。
こちらがclienthint.jsの中身です。


次にPHPファイルの中身を書いていきます。ファイル名はgethint.phpとします。
PHPに書き込んだ名前のリストが、ユーザがアルファベットを入力欄に記入した際に呼び出されます。

<?php
// 配列に名前を入れていきます。
$a[]="Abe";
$a[]="Baba";
$a[]="Chiba";
$a[]="Doi";
$a[]="Endo";
$a[]="Fjita";
$a[]="Gushiken";
$a[]="Honda";
$a[]="Iida";
$a[]="Jojima";
$a[]="Kitagawa";
$a[]="Lee";
$a[]="Nitanai";
$a[]="Ookawa";
$a[]="Perry";
$a[]="Araki";
$a[]="Roppongi";
$a[]="Chida";
$a[]="Doikawa";
$a[]="Fujishima";
$a[]="Fukuda";
$a[]="Sugawara";
$a[]="Tanaka";
$a[]="Usuda";
$a[]="Umeki";
$a[]="Watanabe";
$a[]="Edo";
$a[]="Mori";
$a[]="Ono";
$a[]="Sasaki";

//qパラメータをURLから獲得します。
$q=$_GET["q"];

//qが一文字以上であれば予測できる名前を探します。
if (strlen($q) > 0)
  {
  $hint="";
  for($i=0; $i<count($a); $i++)
    {
    if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))
      {
      if ($hint=="")
        {
        $hint=$a[$i];
        }
      else
        {
        $hint=$hint." , ".$a[$i];
        }
      }
    }
  }

// もしもリストの中から同じアルファベットの配列を発見できない場合は
// "no suggestion"を返します。
if ($hint == "")
  {
  $response="no suggestion";
  }
else
  {
  $response=$hint;
  }

//予測したヒントもしくはno suggestionを返します。
echo $response;
?>

このPHPファイルとclienthint.js及び最終的なHTMLを同じディレクトリにおけば、完成です。
入力欄に文字が打たれる度にファンクションが実行され名前を予測します。