AutoComplete 自動補完エフェクト コードを 10 分で作成_JavaScript スキル

.決まり文句 --- ;
function createXmlHttpRequest()
{

if(window.ActiveXObject) { xmlHttp=new ActieveXObject("Microsoft.XMLHTTP") } else if( window.XMLHttpRequest) { xmlHttp=new XMLHttpRequest();

}

}


JavaScript の記述に Jquery を使用しない場合手動で、上記を XmlHttpRequest オブジェクト プールに変更する必要があります。これについてはもう書きません。
。オートコンプリート関数をトリガーします。
コード




コードをコピーします。


コードは次のとおりです:

関数 $E(引数)
{
return document.getElementById(引数);

関数 GetInfo(e) { var input=$E ("Text1 ").value; if(input.length{ changeDisplay()

}

else
{
createXmlHttpRequest();
var キーワード=e.value;

xmlHttp.onreadystatechange=readyStateChangeHandle;
var url="AutoComplete.ashx?keyword=" キーワード "&timeStamp=" new Date().getTime();
xmlHttp.open("GET",url,true);
xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8'); >xmlHttp.send(null);
}
}


ここでのサーバーのバックグラウンドは、クライアントのリクエストに応答するための .NET プラットフォーム上の xxx.ashx 汎用ハンドラーです。 、webservices、aspx.cs、または WCF を使用してクライアント要求に応答することもできますが、Web サービス応答クライアントは SOAP プロトコルに従う必要があることに注意してください (もちろん、Web サービスが応答するように構成ファイルを変更することもできます) get または post リクエスト)、xxx.ashx および aspx.cs クライアントへの応答は http プロトコルに従う必要があります。もちろん、バックエンドは PHP または JAVA にすることもできます。
。マウスの移動で色が変わります。




コードをコピーします。


コードは次のとおりです。


関数changecolor(event)

{

event.style.background="#00FFFF";

} 関数 changebackcolor(event) { event.style .background=" #FFFFFF" }

。選択範囲の非表示と外観
コード




コードをコピー


コードは次のとおりです:

function ChangeDivDisplay(e)
{
document.getElementById("Text1").value=e.firstChild。データ;
var html ="";
document.getElementById("searchResult").style.visibility="hidden";

関数 changeDisplay() { var html=""; document.getElementById("searchResult").innerHTML=html; ).style.visibility=" hidden"; }

.コールバック関数
コード




コードをコピー


コードは次のとおりです。


function readyStateChangeHandle()
{
if(xmlHttp.readyState==4)
{

if(xmlHttp. status==200)
{

if(xmlHttp.responseText!="]")

{ var resultDiv=$E("searchResult"); var josnStr=eval('(' xmlHttp.responseText ')'); var html="" for (josnStr の var キー) {

html = "" この本 ;/span>";

}
html = "閉じる";

resultDiv.innerHTML=html
document.getElementById("searchResult") .style.visibility = "表示";
else
{
changeDisplay()
}
}
}

;
ここでは json を使用しますが、もちろん XML や文字列も使用できます。