📌  相关文章
📜  使用 jQuery 和 Wikipedia OpenSearch API 自动完成搜索(1)

📅  最后修改于: 2023-12-03 15:22:13.342000             🧑  作者: Mango

使用 jQuery 和 Wikipedia OpenSearch API 自动完成搜索

在 Web 开发中，搜索框是一个常见的组件。为了增强用户体验，我们可以使用自动完成搜索（Autocomplete Search），即用户在输入关键词时，搜索框会自动弹出搜索提示列表，用户可以从列表中点击选择匹配的结果。本文将介绍如何使用 jQuery 和 Wikipedia OpenSearch API 实现自动完成搜索功能。

Wikipedia OpenSearch API

Wikipedia OpenSearch API 是维基百科提供的一种搜索 API，通过这个接口可以获取到包含输入关键词的搜索提示列表。该 API 的请求地址为：

http://en.wikipedia.org/w/api.php?action=opensearch&search=keyword

其中，search 参数表示需要搜索的关键词。API 返回数据的格式为 JSON，数据结构如下：

[
    "keyword",
    ["suggestion1", "suggestion2", "..."],
    ["url1", "url2", "..."],
    ["description1", "description2", "..."]
]

第一个元素是搜索的关键词，第二个数组包含了搜索提示列表，第三个数组是每个提示对应的 URL，第四个数组是每个提示的描述。我们可以根据需要使用这些数据。

jQuery Autocomplete

jQuery Autocomplete 是 jQuery UI 提供的一个组件，可以帮助我们实现自动完成搜索的功能。它需要一个能够返回包含搜索提示的数据源，并提供一个回调函数以处理用户选择结果。在本例中，我们将使用 Wikipedia OpenSearch API 作为数据源。

以下是实现自动完成搜索的代码片段：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Autocomplete Search</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="//code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
    <input id="search-input" type="text">
    <script>
        $('#search-input').autocomplete({
            source: function(request, response){
                var keyword = encodeURIComponent(request.term);
                var url = 'http://en.wikipedia.org/w/api.php?action=opensearch&format=json&callback=?&search=' + keyword;
                $.getJSON(url, function(data){
                    response(data[1]);
                });
            }
        });
    </script>
</body>
</html>

在上面的代码中，我们先引入了 jQuery 和 jQuery UI 库，然后在 input 元素上调用了 autocomplete() 方法，传入了一个配置对象。其中，source 属性指定了数据源，我们定义了一个函数来处理输入关键词，并通过 AJAX 请求获取包含搜索提示的数据。最后，我们将包含提示的第二个数组作为回调函数的参数。

效果展示：

Autocomplete Search

总结

使用 jQuery Autocomplete 和 Wikipedia OpenSearch API 可以轻松地实现自动完成搜索的功能。此外，我们还可以使用其他 API 或基于数据库的自定义数据源来满足自己的需求。