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

简介

本文介绍如何使用 jQuery 和 Wikipedia OpenSearch API 实现一个自动完成搜索功能，该功能可以让用户输入搜索关键词时，自动提示一些可能的搜索结果。

Wikipedia OpenSearch API

Wikipedia OpenSearch API 是维基百科提供的一种搜索接口，可以返回与搜索关键词相关的一些搜索结果。该接口的 url 格式如下：

http://en.wikipedia.org/w/api.php?action=opensearch&search=<search_terms>&format=json&callback=?

其中 <search_terms> 是搜索关键词，json 是返回的格式，callback 是 jsonp 回调函数名称。

实现原理

当用户输入搜索关键词时，我们使用 jQuery 的 $.ajax() 方法向 Wikipedia OpenSearch API 发送请求，得到相关的搜索结果后，将其显示在页面上。具体实现过程如下：

1. 在 HTML 页面中添加一个文本框，用于输入搜索关键词。

<input type="text" id="search-box" placeholder="Type to search...">

2. 使用 jQuery 监听文本框的 input 事件，当用户输入时，自动发起搜索请求。

$('#search-box').on('input', function() {
  var searchTerm = $(this).val();
  if (searchTerm.length >= 3) {
    $.ajax({
      url: 'http://en.wikipedia.org/w/api.php',
      data: {
        action: 'opensearch',
        search: searchTerm,
        format: 'json'
      },
      dataType: 'jsonp',
      success: function(data) {
        // 处理搜索结果
      }
    });
  }
});

3. 在请求成功后，用 jQuery 动态创建一个列表，并将搜索结果显示在列表中。

$('#search-box').on('input', function() {
  var searchTerm = $(this).val();
  if (searchTerm.length >= 3) {
    $.ajax({
      url: 'http://en.wikipedia.org/w/api.php',
      data: {
        action: 'opensearch',
        search: searchTerm,
        format: 'json'
      },
      dataType: 'jsonp',
      success: function(data) {
        var suggestions = data[1];
        var $list = $('<ul>');
        $.each(suggestions, function(index, suggestion) {
          var $item = $('<li>').text(suggestion);
          $list.append($item);
        });
        $('#search-results').html($list);
      }
    });
  }
});

完整代码如下：

$('#search-box').on('input', function() {
  var searchTerm = $(this).val();
  if (searchTerm.length >= 3) {
    $.ajax({
      url: 'http://en.wikipedia.org/w/api.php',
      data: {
        action: 'opensearch',
        search: searchTerm,
        format: 'json'
      },
      dataType: 'jsonp',
      success: function(data) {
        var suggestions = data[1];
        var $list = $('<ul>');
        $.each(suggestions, function(index, suggestion) {
          var $item = $('<li>').text(suggestion);
          $list.append($item);
        });
        $('#search-results').html($list);
      }
    });
  }
});

结语

使用 jQuery 和 Wikipedia OpenSearch API 实现自动完成搜索功能十分简单。读者可以参考本文的代码实现自己的自动完成搜索功能。