📅 最后修改于: 2023-12-03 15:36:30.823000 🧑 作者: Mango
本文将介绍如何使用 jQuery 和 Wikipedia OpenSearch API，来实现自动完成搜索的功能。自动完成搜索，是指当用户在搜索框中输入关键词时，系统会自动提示相关的搜索列表。这种功能能够提高搜索效率和用户体验。
Wikipedia OpenSearch API 是一个用于查询维基百科文章的 API。它提供一个搜索接口（https://en.wikipedia.org/w/api.php?action=opensearch），可以返回与搜索关键词相关的文章标题、描述和 URL。这个接口可以通过 AJAX（Asynchronous JavaScript and XML）技术来进行访问，从而实现自动完成搜索的功能。
首先，我们需要引入 jQuery 库。可以通过以下方式，在 HTML 文件的 head 标签中加入：
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
接下来，我们需要绑定搜索框的 keyup 事件，并使用 AJAX 访问 Wikipedia OpenSearch API：
$(document).ready(function() {
// 绑定搜索框的 keyup 事件
$("#searchbox").keyup(function() {
// 获取搜索框中的关键词
var keyword = $(this).val();
// 访问 Wikipedia OpenSearch API，并获取搜索结果
$.ajax({
url: "https://en.wikipedia.org/w/api.php?action=opensearch&search=" + keyword + "&format=json",
dataType: "jsonp",
success: function(data) {
// 将搜索结果显示在下拉列表中
var html = "";
for (var i = 0; i < data[1].length; i++) {
html += "<li>" + data[1][i] + "</li>";
}
$("#searchresult").html(html);
}
});
});
});
在上述代码中，我们首先绑定搜索框的 keyup 事件。当用户在搜索框中输入关键词时，系统会自动触发这个事件。接下来，我们获取搜索框中的关键词，并使用 AJAX 访问 Wikipedia OpenSearch API。注意，我们使用 JSONP（JSON with Padding）格式来进行跨域访问。
当访问成功后，我们将搜索结果显示在一个下拉列表中。这里我们使用了一个 for 循环，将每个搜索结果显示为一个 li 元素：
<ul id="searchresult"></ul>
完整的 HTML、CSS、JavaScript 代码如下：
<!DOCTYPE html>
<html>
<head>
<title>Auto Complete Search with jQuery and Wikipedia OpenSearch API</title>
<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
#searchbox {
width: 300px;
padding: 5px;
font-size: 16px;
}
#searchresult {
width: 300px;
margin: 0;
padding: 0;
list-style: none;
background-color: #fff;
border: 1px solid #ccc;
border-top: none;
}
#searchresult li {
padding: 5px;
cursor: pointer;
}
#searchresult li:hover {
background-color: #f2f2f2;
}
</style>
<script>
$(document).ready(function() {
// 绑定搜索框的 keyup 事件
$("#searchbox").keyup(function() {
// 获取搜索框中的关键词
var keyword = $(this).val();
// 访问 Wikipedia OpenSearch API，并获取搜索结果
$.ajax({
url: "https://en.wikipedia.org/w/api.php?action=opensearch&search=" + keyword + "&format=json",
dataType: "jsonp",
success: function(data) {
// 将搜索结果显示在下拉列表中
var html = "";
for (var i = 0; i < data[1].length; i++) {
html += "<li>" + data[1][i] + "</li>";
}
$("#searchresult").html(html);
}
});
});
});
</script>
</head>
<body>
<input type="text" id="searchbox" placeholder="Search...">
<ul id="searchresult"></ul>
</body>
</html>
本文介绍了如何使用 jQuery 和 Wikipedia OpenSearch API，来实现自动完成搜索的功能。自动完成搜索能够提高用户的搜索效率和体验。同时，本文也提供了完整的 HTML、CSS、JavaScript 代码，方便读者参考和使用。