Ajax实现搜索引擎自动补全功能

实现搜索引擎自动补全功能的一种方式是通过Ajax技术来异步获取匹配结果，并动态更新在页面上。

以下是具体步骤：

1. 构建搜索表单

构建一个包含搜索框的表单，需要设置一个 input 元素的 id 为 search，表示搜索输入框。

<form>
  <input type="text" id="search" name="q" placeholder="搜索..." autocomplete="off">
</form>

2. 编写Javascript代码

首先使用 jQuery 库，绑定输入框的 keyup 事件，并在事件处理函数中异步获取匹配结果，将匹配结果更新到下拉列表中，最后将下拉列表显示出来。

$(function () {
  // 获取搜索框输入元素
  var searchInput = $('#search');
  // 获取下拉列表容器元素
  var dropdown = $('<ul>').addClass('dropdown-menu').appendTo('body');
  // 绑定搜索框输入事件
  searchInput.on('keyup', function () {
    // 获取输入框内容
    var searchValue = searchInput.val().trim();
    // 如果输入框内容为空，则隐藏下拉列表
    if (searchValue.length === 0) {
      dropdown.hide();
      return;
    }
    // 使用Ajax异步获取匹配结果
    $.get('/search?q=' + searchValue, function (data) {
      // 清空下拉列表
      dropdown.empty();
      // 遍历匹配结果，将每个结果添加为下拉列表项
      data.forEach(function (item) {
        $('<li>').addClass('dropdown-item').text(item).appendTo(dropdown);
      });
      // 显示下拉列表
      dropdown.show();
    });
  });
});

3. 创建服务端API

默认情况下，$.get() 方法请求的是当前页面路径加上指定的URL。因此，需要在服务器端提供一个API来处理搜索请求，并返回匹配的结果。

示例1：使用 Node.js Express 框架提供搜索API：

const app = require('express')();
app.get('/search', function(req, res) {
  // 根据请求参数 q 进行搜索，返回匹配结果
  let results = search(req.query.q);
  res.json(results);
});

示例2：使用 PHP 提供搜索API：

<?php
$q = $_GET['q'];
// 根据参数 q 进行搜索，返回匹配结果
$results = search($q);
header('Content-Type: application/json');
echo json_encode($results);
?>

4. 样式设计

需要为下拉列表设置样式，使它呈现出下拉菜单的形态。例如，将下拉列表的容器设置为绝对定位，跟随搜索框的位置进行定位；设置背景颜色、边框、阴影等样式。

.dropdown-menu {
  position: absolute;
  margin-top: 0.3rem;
  z-index: 1000;
  list-style: none;
  background-color: #fff;
  border: 1px solid rgba(0,0,0,.15);
  box-shadow: 0 6px 12px rgba(0,0,0,.175);
  border-radius: 0.25rem;
  width: 100%;
}
.dropdown-item {
  display: block;
  padding: 0.25rem 1.5rem;
  clear: both;
  font-weight: 400;
  color: #212529;
  text-align: inherit;
  white-space: nowrap;
  background-color: transparent;
  border: 0;
}
.dropdown-item:hover {
  color: #16181b;
  background-color: #f8f9fa;
}

到此为止，一个简单的 Ajax 实现搜索引擎自动补全功能的例子就完成了。

示例3：扩展功能

1. 通过键盘上下键选择匹配结果，并通过回车键提交选中结果到搜索框。

// 绑定下拉列表项 hover 事件
dropdown.on('hover', 'li', function () {
  // 将 hover 状态的列表项设置为 active 样式，并移除兄弟节点的 active 样式
  $(this).addClass('active').siblings('.active').removeClass('active');
});
// 绑定键盘事件
searchInput.on('keydown', function (event) {
  var keyCode = event.which;
  switch(keyCode) {
    // 上键
    case 38:
      event.preventDefault();
      var active = dropdown.find('.active');
      if (active.length) {
        active.prev().addClass('active').siblings('.active').removeClass('active');
      } else {
        dropdown.children().last().addClass('active');
      }
      break;
    // 下键
    case 40:
      event.preventDefault();
      var active = dropdown.find('.active');
      if (active.length) {
        active.next().addClass('active').siblings('.active').removeClass('active');
      } else {
        dropdown.children().first().addClass('active');
      }
      break;
    // 回车键
    case 13:
      event.preventDefault();
      var active = dropdown.find('.active');
      if (active.length) {
        searchInput.val(active.text());
        dropdown.hide();
      }
      break;
  }
});

1. 防抖或节流，减少Ajax请求次数。

// 使用 underscore 或 lodash 库提供的 debounce 或 throttle 方法
searchInput.on('keyup', _.throttle(function () {
  // ...
}, 500));