JavaScript | 自动完成建议功能

在网页应用程序中，输入框自动完成建议功能（也称为自动完成）可以大大提高用户体验和生产力，允许用户更快地输入数据，减少人为错误。

在 JavaScript 中，实现自动完成建议功能通常需要以下步骤：

1. 获取用户输入
2. 从后台获取可能的建议
3. 将建议展示给用户
4. 处理用户选择的建议

下面我们逐步介绍这些步骤和相关的技术和库。

获取用户输入

获取用户输入可以通过 input 标签的 oninput 事件来实现，也可以通过 keydown、keyup 等一系列事件来处理。

const input = document.querySelector('input');
input.addEventListener('input', () => {
  const inputValue = input.value.trim(); // 获取用户输入的值并去除首位空格
  // 建议：不要立即处理用户的输入，而是等待一定的时间或输入数量以减轻服务器的压力
});

从后台获取可能的建议

获取可能的建议可以通过 Ajax 或 Fetch 获得后台返回的数据，后台可以使用任何语言或框架来处理数据，但数据的格式应该是 JSON，类似于以下格式：

{
  "suggestions": [
    "JavaScript",
    "Java",
    "Python",
    "C++"
  ]
}

下面是使用 Fetch 获取数据的示例代码：

const getSuggestions = async (inputValue) => {
  const response = await fetch(`/suggestions?query=${inputValue}`);
  const data = await response.json();
  return data.suggestions;
};

将建议展示给用户

将建议展示给用户可以通过列表来实现，并使用 CSS 样式进行修饰。

<ul id="suggestion-list"></ul>

#suggestion-list {
  position: absolute;
  z-index: 999;
  max-height: 240px;
  overflow-y: auto;
  list-style-type: none;
  padding: 0;
  margin: 0;
  border: 1px solid #ccc;
  background-color: #fff;
}

下面是通过 JavaScript 动态生成列表的代码：

const input = document.querySelector('input');
const suggestionList = document.querySelector('#suggestion-list');

input.addEventListener('input', async () => {
  const inputValue = input.value.trim();

  // 获取建议并生成建议列表
  if (inputValue) {
    const suggestions = await getSuggestions(inputValue);
    suggestionList.innerHTML = suggestions
      .map(suggestion => `<li>${suggestion}</li>`)
      .join('');
    suggestionList.style.display = 'block';
  } else {
    suggestionList.style.display = 'none';
  }
});

处理用户选择的建议

处理用户选择的建议可以通过从建议列表中选择一个选项，将其填充回输入框中，然后隐藏建议列表来实现。

const input = document.querySelector('input');
const suggestionList = document.querySelector('#suggestion-list');

input.addEventListener('keydown', (event) => {
  // 处理用户选择的建议
  if (suggestionList.style.display === 'block') {
    const selectedSuggestion = suggestionList.querySelector('.selected');
    switch (event.key) {
      case 'ArrowUp':
        if (selectedSuggestion && selectedSuggestion.previousElementSibling) {
          selectedSuggestion.classList.remove('selected');
          selectedSuggestion.previousElementSibling.classList.add('selected');
        } else {
          suggestionList.lastElementChild.classList.add('selected');
        }
        break;
      case 'ArrowDown':
        if (selectedSuggestion && selectedSuggestion.nextElementSibling) {
          selectedSuggestion.classList.remove('selected');
          selectedSuggestion.nextElementSibling.classList.add('selected');
        } else {
          suggestionList.firstElementChild?.classList.add('selected');
        }
        break;
      case 'Enter':
        if (selectedSuggestion) {
          input.value = selectedSuggestion.textContent;
        }
        suggestionList.style.display = 'none';
        break;
      case 'Escape':
        suggestionList.style.display = 'none';
        break;
    }
  }
});

suggestionList.addEventListener('mousedown', (event) => {
  // 处理用户单击建议列表的选项
  if (event.target.nodeName === 'LI') {
    input.value = event.target.textContent;
    suggestionList.style.display = 'none';
  }
});

suggestionList.addEventListener('mouseover', (event) => {
  // 处理用户悬浮在建议列表的选项上
  if (event.target.nodeName === 'LI') {
    const selectedSuggestion = suggestionList.querySelector('.selected');
    selectedSuggestion?.classList.remove('selected');
    event.target.classList.add('selected');
  }
});

至此，我们已经介绍了 JavaScript 中自动完成建议功能的实现过程和常见技术和库。如果你想进一步了解这方面的知识，建议学习 Vue、React 等前端框架或自行实现一个自动完成建议控件。