JavaScript实现搜索框的自动完成功能(一)

以下是详细的讲解：

JavaScript实现搜索框的自动完成功能(一) - 完整攻略

1. 自动完成功能的介绍

自动完成功能是指用户在输入搜索关键字时，搜索框会自动显示出与该关键字相关的搜索建议或关键字列表。这种功能通常使用 AJAX 技术来实现，通过 JavaScript 发送异步请求，获取服务器返回的搜索建议或关键字列表，并将其显示在下拉框中。

2. 实现过程

2.1 HTML 结构

首先，在 HTML 页面中添加一个输入框和一个用于显示搜索建议的下拉框。给它们分别加上 id，以便于之后的 JavaScript 代码调用。

<input type="text" id="search-input">
<div id="search-suggestions"></div>

2.2 CSS 样式

为了让下拉框呈现出合适的样式，我们需要在 CSS 中为其设置一些基本样式，比如宽度、高度、边框、背景等。

#search-suggestions {
  display: none;
  position: absolute;
  width: 200px;
  border: 1px solid #ccc;
  background-color: #fff;
}

这里设置了下拉框在开始时不可见，当用户输入文本时才显示出来，以及下拉框的基本样式。

2.3 JavaScript 实现

接下来，我们将使用 JavaScript 实现自动完成功能。

2.3.1 实现搜索建议的获取

这里我们使用 jQuery 提供的 AJAX 方法进行异步请求，从服务器获取搜索建议。我们需要监听输入框中的文本变化事件，当它发生变化时，立即发送 AJAX 请求获取搜索建议。

// 监听输入框中文本变化事件
$('#search-input').on('input', function() {
  // 发送异步请求获取搜索建议
  $.ajax({
    url: '/search',
    data: { keyword: $('#search-input').val() },
    success: function(result) {
      // 将搜索建议显示在下拉框中
      $('#search-suggestions').html(result).show();
    }
  });
});

这里我们使用了 jQuery 的 on 方法在输入框上绑定了一个 input 事件，当输入框中的文本变化时，就会触发该事件。在事件处理函数中，我们使用 AJAX 发送异步请求，并在成功回调函数中将服务器返回的搜索建议插入到下拉框中并显示出来。

2.3.2 实现搜索建议的选择

接下来，我们需要实现用户在搜索建议下拉框中的选择功能。当用户点击下拉框中的某个搜索建议时，我们需要将该建议的文本设置为输入框中的值，并隐藏下拉框。

// 监听搜索建议下拉框中搜索建议的点击事件
$('#search-suggestions').on('click', '.search-suggestion', function() {
  // 将搜索建议设置为输入框中的值
  $('#search-input').val($(this).text());
  // 隐藏搜索建议下拉框
  $('#search-suggestions').hide();
});

这里我们使用了 jQuery 的 on 方法，在搜索建议下拉框上绑定了一个 click 事件。当用户点击下拉框中的某个搜索建议时，就会触发该事件。在事件处理函数中，我们将该建议的文本设置为输入框中的值，并隐藏下拉框。

3. 示例说明

下面我们使用一个示例来说明如何在真实的项目中使用自动完成功能。

假设我们的网站有一个搜索框，用于搜索文章标题。我们希望搜索框能够自动显示与用户输入关键字相关的文章标题，并支持用户选择其中的文章标题。

3.1 HTML 结构

我们在 HTML 页面中添加如下结构：

<div id="search-box">
  <input type="text" id="search-input">
  <div id="search-suggestions"></div>
</div>

3.2 CSS 样式

我们在 CSS 中为搜索框及其相关元素设置样式：

#search-box {
  position: relative;
  width: 300px;
  height: 40px;
  margin: 20px auto;
  border: 1px solid #ccc;
  border-radius: 20px;
  background-color: #fff;
  box-shadow: 0 0 5px #ccc;
}
#search-input {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 280px;
  height: 20px;
  font-size: 16px;
  border: none;
  outline: none;
}
#search-suggestions {
  display: none;
  position: absolute;
  top: 40px;
  left: 0;
  width: 300px;
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid #ccc;
  background-color: #fff;
  box-shadow: 0 0 5px #ccc;
}
.search-suggestion {
  padding: 5px 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

3.3 JavaScript 实现

在 JavaScript 中，我们需要监听输入框中的文本变化事件，当它发生变化时，立即发送 AJAX 请求获取搜索结果，并将结果显示在下拉框中。在下拉框中，我们监听用户的点击事件，当用户选择某个搜索结果时，将该结果设置为输入框中的值。

// 监听输入框中文本变化事件
$('#search-input').on('input', function() {
  // 发送异步请求获取搜索结果
  $.ajax({
    url: '/search',
    data: { keyword: $('#search-input').val() },
    success: function(result) {
      // 将搜索结果显示在下拉框中
      $('#search-suggestions').html(result).show();
    }
  });
});

// 监听搜索结果下拉框中搜索结果的点击事件
$('#search-suggestions').on('click', '.search-suggestion', function() {
  // 将搜索结果设置为输入框中的值
  $('#search-input').val($(this).text());
  // 隐藏搜索结果下拉框
  $('#search-suggestions').hide();
});

在服务器端，我们需要根据用户输入的关键字查询相关的文章标题，并返回一个 HTML 代码块，用于在客户端中显示搜索结果。比如，我们可以使用 Node.js 和 Express 来实现这个功能：

app.get('/search', function(req, res) {
  // 从数据库中查询相关的文章标题
  var query = req.query.keyword;
  var results = db.query('SELECT title FROM articles WHERE title LIKE ?', '%' + query + '%');
  // 将查询结果格式化为 HTML 代码块
  var html = '';
  for (var i = 0; i < results.length; i++) {
    html += '<div class="search-suggestion">' + results[i].title + '</div>';
  }
  // 将 HTML 代码块返回给客户端
  res.send(html);
});

这样，当用户在搜索框中输入关键字时，搜索框就会自动显示出与该关键字相关的文章标题，并支持用户选择其中的文章标题。

4. 总结

至此，我们已经完成了 JavaScript 实现搜索框的自动完成功能(一)的完整攻略。整个过程的实现涉及到 HTML、CSS 和 JavaScript，同时也需要服务器端的支持，需要对 AJAX 和 jQuery 等技术有一定的了解。对于需求不是很复杂的场景，可以使用第三方库来实现自动完成功能，比如 Google 的 Autocomplete.js。