PHP - Tự động hoàn thành tìm kiếm Ajax
Tự động hoàn thành tìm kiếm
Hộp tìm kiếm Tự động hoàn thành cung cấp các đề xuất khi bạn nhập dữ liệu vào trường. Ở đây chúng tôi đang sử dụng xml để gọi các đề xuất tự động hoàn thành. Ví dụ dưới đây minh họa, Cách sử dụng hộp văn bản tự động hoàn thành bằng php.
Trang mục lục
Trang chỉ mục phải như sau:
<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
Nó được sử dụng để gọi dữ liệu từ tệp xml và nó sẽ gửi kết quả đến trình duyệt 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
Nó chứa dữ liệu tự động hoàn thành và được truy cập bởi livesearch.php dựa trên trường tittle và Url được lưu trữ
<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>Nó sẽ tạo ra kết quả sau:
