PHP-Ajax Auto Complete Search
オートコンプリート検索
オートコンプリート検索ボックスは、フィールドにデータを入力するときに提案を提供します。 ここでは、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.finddevguides.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.finddevguides.com/android/index</url>
</link>
<link>
<title>Java</title>
<url>http://www.finddevguides.com/java/index</url>
</link>
<link>
<title>CSS </title>
<url>http://www.finddevguides.com/css/index</url>
</link>
<link>
<title>angularjs</title>
<url>http://www.finddevguides.com/angularjs/index </url>
</link>
<link>
<title>hadoop</title>
<url>http://www.finddevguides.com/hadoop/index </url>
</link>
<link>
<title>swift</title>
<url>http://www.finddevguides.com/swift/index </url>
</link>
<link>
<title>ruby</title>
<url>http://www.finddevguides.com/ruby/index </url>
</link>
<link>
<title>nodejs</title>
<url>http://www.finddevguides.com/nodejs/index </url>
</link>
</pages>それは次の結果を生成します-
