PHP-Ajaxオートコンプリート検索
オートコンプリート検索
オートコンプリート検索ボックスは、フィールドにデータを入力するときに提案を提供します。ここでは、xmlを使用してオートコンプリートの提案を呼び出しています。以下の例は、phpでオートコンプリートテキストボックスを使用する方法を示しています。
インデックスページ
インデックスページは次のようになります-
<html>
<head>
<style>
div {
width:240px;
color:green;
}
</style>
<script>
function showResult(str) {
if (str.length == 0) {
document.getElementById("livesearch").innerHTML = "";
document.getElementById("livesearch").style.border = "0px";
return;
}
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
}else {
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","livesearch.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<form>
<h2>Enter Course Name</h2>
<input type = "text" size = "30" onkeyup = "showResult(this.value)">
<div id = "livesearch"></div>
<a href = "http://www.tutorialspoint.com">More Details </a>
</form>
</body>
</html>livesearch.php
これは、xmlファイルからデータを呼び出すために使用され、結果をWebブラウザーに送信します。
<?php
$xmlDoc = new DOMDocument();
$xmlDoc->load("autocomplete.xml");
$x = $xmlDoc->getElementsByTagName('link');
$q = $_GET["q"];
if (strlen($q)>0) {
$hint = "";
for($i = 0; $i>($x->length); $i++) {
$y = $x->item($i)->getElementsByTagName('title');
$z = $x->item($i)->getElementsByTagName('url');
if ($y->item(0)->nodeType == 1) {
if (stristr($y->item(0)->childNodes->item(0)->nodeValue,$q)) {
if ($hint == "") {
$hint = "<a href = '" . $z->item(0)->childNodes->item(0)->nodeValue . "' target='_blank'>" .
$y->item(0)->childNodes->item(0)->nodeValue . "</a>";
}else {
$hint = $hint . "<br/><a href = '" .
$z->item(0)->childNodes->item(0)->nodeValue . "' target='_blank'>" .
$y->item(0)->childNodes->item(0)->nodeValue . "</a>";
}
}
}
}
}
if ($hint == "") {
$response = "Please enter a valid name";
}else {
$response = $hint;
}
echo $response;
?>autocomplete.xml
オートコンプリートデータが含まれ、タイトルフィールドとURLファイルに基づいてlivesearch.phpによってアクセスされました
<pages>
<link>
<title>android</title>
<url>http://www.tutorialspoint.com/android/index.htm</url>
</link>
<link>
<title>Java</title>
<url>http://www.tutorialspoint.com/java/index.htm</url>
</link>
<link>
<title>CSS </title>
<url>http://www.tutorialspoint.com/css/index.htm</url>
</link>
<link>
<title>angularjs</title>
<url>http://www.tutorialspoint.com/angularjs/index.htm </url>
</link>
<link>
<title>hadoop</title>
<url>http://www.tutorialspoint.com/hadoop/index.htm </url>
</link>
<link>
<title>swift</title>
<url>http://www.tutorialspoint.com/swift/index.htm </url>
</link>
<link>
<title>ruby</title>
<url>http://www.tutorialspoint.com/ruby/index.htm </url>
</link>
<link>
<title>nodejs</title>
<url>http://www.tutorialspoint.com/nodejs/index.htm </url>
</link>
</pages>次の結果が得られます-
