j を入力すると、ajax エフェクトがトリガーされ、名前に j が含まれる対応するデータがバックグラウンドから取得され、候補に表示されます。
コードは次のように実装されます:
ajax を実装するには 3 つのファイルが必要です。1 つは html フォーム ファイル、1 つは js コア ファイル、もう 1 つは php バックグラウンド ファイルです。
以下は HTML ファイルです。キーボードが押されると showHint メソッドがトリガーされ、showHint メソッドには、アドレスの取得、データの取得と表示などのコアの内容が含まれます。
提案:
var xmlHttp
function showHint(str)
{if (str.length==0)
{
document.getElementById("txtHint").innerHTML=""
return
}
//xmlH を取得ttpObject オブジェクトが空の場合、ブラウザーが ajax をサポートしていないことを通知します
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("ブラウザーは HTTP リクエストをサポートしていません")
return
}
//Get url
var url="gethint.php"
url=url+"?q="+str
url=url+"&sid="+Math.random()
//コールバック関数、アクションを実行
xmlHttp.onreadystatechange=stateChanged
// open
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}
function stateChanged()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState==" complete" )
{
//取得した情報をtxtHint
に挿入 document.getElementById("txtHint").innerHTML=xmlHttp.responseText
}
}
//xmlオブジェクトを取得
function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox、Opera 8.0+、Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject ( "Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft. ajax オブジェクトによって渡されたパラメーターに基づいて、対応するデータを取得します。
// 配列に名前を入力します
$a[]="アンナ";
$a[]="ブリタニー";
$a[]="シンデレラ";
$a[]= "ディアナ";
$a[]="エヴァ";
$a[]="ガンダ";
$a[]="ヘゲ";$a[]= "インガ";
$a[]="ジョハンナ";$a[]="ジーチン";
$a[]="キティ";
$a[]="リンダ";
$a[]= "ニーナ";
$a[]="オフィーリア";
$a[]="ペチュニア";
$a[]="アマンダ";
$a[]="ラケル";
$a[]= "シンディ";
$a[]="ドリス";
$a[]="イブ";
$a[]="エビータ";
$a[]="サンニヴァ";
$a[]= "トーベ";
$a[]="ウンニ";
$a[]="バイオレット";
$a[]="リザ";
$a[]="エリザベス";
$a[]= "エレン";
$a[]="ウェンチェ";
$a[]="ヴィッキー";
// URL から q パラメーターを取得します
$q=$_GET["q"];
// q>0 の長さの場合、配列からすべてのヒントを検索します
if (strlen($q) > 0)
{
$hint="";
for($i=0; $i
if (strto lower($q)==strto lower(substr($a[$i],0,strlen($q))))
{
if ($hint=="")
{
$hint=$a[$i];
}
$hint=$hint=$hint。ヒントが見つからなかった場合は「提案なし」
//または正しい値
if ($hint == "")
{
$response="提案なし";
}
else
{
$response=$hint;
}
//応答を出力します
echo $response;
?>