自动完成功能是一种预先输入机制,当用户在提供的搜索框中输入数据时显示输入建议。它也被称为实时搜索,因为它会对用户的输入做出反应。
在这个例子中,我们将使用 PHP 中的 AJAX 和 XML 解析器来演示自动完成文本框的使用。
此应用程序有三个主要组成部分 -
- XML 文档
- JavaScript 代码
- PHP 中的 XML 解析器
现在让我们详细讨论这三个组成部分 -
XML 文档
将以下 XML 脚本另存为文档根文件夹中的 “autocomplete.xml”
<?xml version = "1.0" encoding = "utf-8"?>
<pages>
<link>
<title>android</title>
<url>https://www.qikepu.com/android/index.html</url>
</link>
<link>
<title>Java</title>
<url>https://www.qikepu.com/java/index.html</url>
</link>
<link>
<title>CSS </title>
<url>https://www.qikepu.com/css/index.html</url>
</link>
<link>
<title>angularjs</title>
<url>https://www.qikepu.com/angularjs/index.html</url>
</link>
<link>
<title>hadoop</title>
<url>https://www.qikepu.com/hadoop/index.html</url>
</link>
<link>
<title>swift</title>
<url>https://www.qikepu.com/swift/index.html</url>
</link>
<link>
<title>ruby</title>
<url>https://www.qikepu.com/ruby/index.html</url>
</link>
<link>
<title>nodejs</title>
<url>https://www.qikepu.com/nodejs/index.html</url>
</link>
</pages>
JavaScript 代码
以下脚本呈现一个文本字段,供用户输入他选择的课程名称。每次击键时,都会调用一个 JavaScript 函数,并使用 GET 方法将输入值传递给服务器端 PHP 脚本。服务器的响应是异步呈现的。
将此代码另存为 “index.php”。
<html>
<head>
<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>输入课程名称</h2>
<input type = "text" size = "30" onkeyup = "showResult(this.value)">
<div id = "livesearch"></div>
<a href = "https://www.qikepu.com">更多详细信息</a>
</form>
</body>
</html>
PHP XML 解析器
这是服务器上的 PHP 脚本。它解析给定的 XML 源文档,读取在输入字段中输入的字符,在解析的 XNL 对象中搜索它,然后发回响应。
将以下代码另存为 “livesearch.php”。
<?php
$xml_doc = new DOMDocument();
$xml_doc->load('autocomplete.xml');
$x=$xml_doc->getElementsByTagName('link');
$q = $_GET['q'];
$result = '';
foreach($x as $node) {
if (stripos("{$node->nodeValue}", $q) !== false) {
$result .= "{$node->nodeValue}";
}
}
// 将$response设置为“未找到记录”。以防找不到提示
// 或匹配值的值
if ($result == '')
$result = '未找到记录。';
// 显示结果或“未找到记录”
echo $result;
?>
在 XAMPP 服务器运行的情况下,访问 “http://localhost/index.php”,浏览器会显示一个输入文本字段。对于键入的每个字符,相关建议都会显示在其下方。