PHP 初心者向けの AJAX リアルタイム検索入門

AJAX はユーザーに、よりフレンドリーでインタラクティブな検索エクスペリエンスを提供できます

次の例では、リアルタイム検索を示し、データを入力しながら検索結果を取得できます

リアルタイム検索と従来の検索の比較検索には多くの利点があります:

データを入力すると、一致する結果が表示されます

データを入力し続けると、結果がフィルタリングされます

結果が少なすぎる場合は、文字を削除して範囲を広げます

お願いします次のケースを参照してください

最初に head. ==0) を作成すると、この関数は livesearch プレースホルダーの内容をクリアして関数を終了します。

入力ボックスが空でない場合、showResult() は次の手順を実行します:

XMLHttpRequest オブジェクトを作成する

サーバーの応答の準備ができたときに実行する関数を作成する

サーバー上のファイルにリクエストを送信する

URLの最後にパラメータ（q）を追加することに注意してください（入力ボックスの内容を含む）

新しいlinks.xmlを作成し、同じレベルのディレクトリに配置する必要があります。コードは次のとおりです。フォローします:

りー

次のセクション

新しいファイル

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<script>
function showResult(str){
	if (str.length==0){ 
		document.getElementById("livesearch").innerHTML="";
		document.getElementById("livesearch").style.border="0px";
		return;
	}
	if (window.XMLHttpRequest){
		// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行
		xmlhttp=new XMLHttpRequest();
	}else{
		// IE6, IE5 浏览器执行
		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}

	xmlhttp.onreadystatechange=function(){
		if (xmlhttp.readyState==4 && xmlhttp.status==200){
			document.getElementById("livesearch").innerHTML=xmlhttp.responseText;
			document.getElementById("livesearch").style.border="1px solid #A5ACB2";
		}
	}
	xmlhttp.open("GET","5_2.php?q="+str,true);
	xmlhttp.send();
}
</script>
</head>
<body>

<form>
<input type="text" size="30" onkeyup="showResult(this.value)">
<div id="livesearch"></div>
</form>

</body>
</html>

提出するリセットコード

自動運転

全画面表示