AJAX根据城市名，自动完成相应的城市信息
AJAX是一种基于JavaScript和XML技术的交互式的数据交换技术，能够使网页在不刷新的情况下与服务器进行异步通信，实现动态更新页面的效果。自动完成功能是一种常见的交互方式，它可以帮助用户快速输入信息，提高用户体验。本文将讲解如何利用AJAX实现根据城市名自动完成相应的城市信息功能。
1. 准备工作
在开始编写代码之前，需要准备一些基本的文件和知识：
? 一个支持AJAX的浏览器，如Chrome、Firefox等；
? 一个Web服务器，如Apache、Nginx等；
? 一个文本编辑器，如VS Code、Sublime Text等；
? 了解HTML、CSS、JavaScript和jQuery的基础知识。
2. 编写HTML和CSS代码
首先，我们需要编写一些HTML和CSS代码来创建基本的页面结构和样式。以下是一个简单的HTML页面模板：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Auto Complete</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="auto-complete">
<input type="text" id="city-input">
<div id="auto-complete-list"></div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="script.js"></script>
</body>
</html>
这段代码中，我们定义了一个带有输入框和结果列表的div容器。输入框的id属性为“city-input”，结果列表的id属性为“auto-complete-list”。我们也引入了jQuery库和一个名为“style.css”的样式文件，并将它们添加到页面的head标签中。
接下来，我们需要编写CSS代码来美化这个页面，使其看起来更有吸引力：
.auto-complete {
position: relative;
display: inline-block;
width: 250px;
}
#auto-complete-list {
position: absolute;
z-index: 1;
width: 100%;
background-color: white;
border: 1px solid grey;
max-height: 250px;
overflow-y: auto;
}
#auto-complete-list div {
padding: 10px;
cursor: pointer;
}
#auto-complete-list div:hover {
background-color: #f2f2f2;
}
这些CSS样式将使我们的结果列表看起来更好，具有相应的容纳和美化。
3. 编写JavaScript代码
最后，我们需要编写一些JavaScript代码来实现城市自动完成功能。在这里，我们将使用AJAX来进行异步请求，然后根据用户输入的关键字来过滤结果。以下是JavaScript代码：
$(document).ready(function(){
$("#city-input").on("input", function(){
var keyword = $(this).val();
if (keyword.length > 1) {
$.ajax({
url: "/api/cities.php",
method: "POST",
data: {keyword: keyword},
success: function(response){
var data = JSON.parse(response);
if (data.length > 0) {
var list = "";
for (var i = 0; i < data.length; i++) {
list += "<div>" + data[i].city_name + "</div>";
}
$("#auto-complete-list").html(list);
} else {
$("#auto-complete-list").empty();
}
}
});
} else {
$("#auto-complete-list").empty();
}
});
$(document).on("click", "#auto-complete-list div", function(){
var city = $(this).text();
$("#city-input").val(city);
$("#auto-complete-list").empty();
});
});
这段代码中，我们使用jQuery编写了一个回调函数，以便在文档准备就绪时初始化代码。我们通过on()函数监听了输入框的input事件，并将用户输入的关键字存储到变量中。如果用户输入的关键字长度大于1，我们将发送一个POST请求到服务器端的api/cities.php文件，其中包含用户输入的关键字。
当响应从服务器返回时，我们将数据解析为JSON格式，并使用for循环遍历返回的城市名和匹配关键字的城市名。然后，我们将这些结果添加到结果列表中的div元素中，并使用html()函数将所有结果呈现在列表中。如果没有匹配的结果，则清空结果列表。
最后，我们使用on()函数监听结果列表的单击事件，并将用户选择的城市名添加到输入框中。在此之后，结果列表将被清空，并且用户可以继续使用自动完成框。
4. 编写服务器端脚本
为了使自动完成功能正常工作，我们还需要编写服务器端脚本来处理AJAX请求，并从数据库中检索匹配的城市名。以下是一个简单的PHP文件：
<?php
// 配置数据库连接信息
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "test";
// 创建数据库连接
$conn = new mysqli($servername, $username, $password, $dbname);
// 检查连接是否正常
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
// 获取POST数据
$keyword = $_POST['keyword'];
// 查询数据库
$sql = "SELECT city_name FROM cities WHERE city_name LIKE '%".$keyword."%'";
$result = $conn->query($sql);
// 将结果存储到数组中
$data = array();
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
$data[] = $row;
}
}
// 输出结果
echo json_encode($data);
// 关闭连接
$conn->close();
?>
这个PHP文件的作用是根据用户输入的关键字查询城市名称并返回结果。我们首先定义了数据库连接信息，并创建了一个mysqli对象来连接MySQL数据库。然后，我们获取通过POST请求传递的关键字，并将输入值与MySQL中存储的城市名进行比较。如果找到匹配的城市名，我们将它们存储在数组中，最后将结果转换为JSON格式并输出。之后我们需要关闭数据库连接。
5. 运行程序
现在，我们已经完成了所有必要的代码，包括HTML、CSS、JavaScript和服务器端脚本。我们可以运行自动完成程序，通过输入城市名并按下键盘上的任意键来触发自动完成列表。当我们选择其中一个城市时，输入框将被相应地填充。
在这个过程中，AJAX技术使我们能够向服务器发送请求和接收响应，而无需刷新页面。这大大提高了用户体验，并使页面具有更多的交互性和实用性。
总结
AJAX根据城市名自动完成相应的城市信息的步骤详细介绍完了，我们已经可以创建一个简单的自动完成应用程序。使用AJAX编写代码可以使我们更轻松地实现交互式页面，并完成诸如自动完成、异步加载和表单验证等任务。
当然，我们可以扩展这个例子，使它更加完善。例如，我们可以在列表上添加更多样式，使其更加美观。我们也可以添加更多的功能，如自动完成补全、联想、多条件查询等等，以增加程序的功能和可用性。