用js实现输入提示(自动完成)的实例代码

想要实现输入提示（autocomplete）功能，我们通常需要以下几个步骤：

1. 获取用户输入

在实现自动完成功能之前，我们首先需要获取用户的输入。在网页中，我们可以通过<input>标签来实现用户输入信息的获取，例如：

<label for="username">用户名：</label>
<input type="text" id="username" name="username" />

在以上代码中，<input>标签中的type属性为text，即表示这是一个文本输入框。用户在文本输入框中输入的内容可以通过对应的value属性来获取，例如：

const inputEl = document.querySelector('#username');
const userInput = inputEl.value;

通过上述代码，就可以获取用户输入的值了。

2. 获取数据源

在实现输入提示功能时，我们通常需要从服务器或者本地数据源中获取数据，以便在用户输入时能够进行匹配。下面是一个简单的本地数据源示例：

const dataList = ['apple', 'banana', 'orange', 'pear'];

在实际应用中，我们通常需要从后端接口获取数据。可以使用 Ajax 或者 Fetch API 来向服务器获取数据。

3. 监听用户输入

获取用户输入后，我们需要以某种方式来监听用户输入，以实现实时匹配提示。一般来说，我们需要监听文本输入框的 input 或者 keyup 事件。input 事件在用户输入后实时触发，而 keyup 事件则需要用户松开按键后才会触发。下面是以 input 事件为例的代码：

const inputEl = document.querySelector('#username');

inputEl.addEventListener('input', e => {
  const userInput = e.target.value;
  // TODO: 处理自动提示逻辑
})

4. 实现自动提示

当用户输入数据时，我们需要在数据源中进行匹配，并将匹配结果展示给用户。下面是一个简单的实现方式：

const inputEl = document.querySelector('#username');
const dataList = ['apple', 'banana', 'orange', 'pear'];

inputEl.addEventListener('input', e => {
  const userInput = e.target.value;
  const matchedItems = dataList.filter(item => item.includes(userInput));
  renderMatchedItems(matchedItems);
});

function renderMatchedItems(matchedItems) {
  const datalistEl = document.querySelector('#datalist');

  // 清空已有的选项
  while (datalistEl.firstChild) {
    datalistEl.removeChild(datalistEl.firstChild);
  }

  // 添加匹配到的选项
  matchedItems.forEach(item => {
    const optionEl = document.createElement('option');
    optionEl.value = item;
    datalistEl.appendChild(optionEl);
  });
}

以上代码中，我们首先通过 filter 方法在数据源中筛选出了符合条件的选项，然后调用了 renderMatchedItems 函数来动态添加选项。

示例1

以下是一个更复杂的示例，我们使用 Fetch API 从后端获取数据并实现自动完成功能。

<label for="country">选择国家：</label>
<input type="text" id="country" name="country" list="datalist" />

<datalist id="datalist"></datalist>

const inputEl = document.querySelector('#country');
const datalistEl = document.querySelector('#datalist');

inputEl.addEventListener('input', e => {
  const userInput = e.target.value.trim();
  if (userInput === '') {
    return;
  }

  fetch(`/api/countries?q=${encodeURIComponent(userInput)}`)
    .then(response => response.json())
    .then(data => {
      renderMatchedItems(data);
    });
});

function renderMatchedItems(matchedItems) {
  // 清空已有的选项
  while (datalistEl.firstChild) {
    datalistEl.removeChild(datalistEl.firstChild);
  }

  // 添加匹配到的选项
  matchedItems.forEach(item => {
    const optionEl = document.createElement('option');
    optionEl.value = item.name;
    datalistEl.appendChild(optionEl);
  });
}

以上代码中，我们通过 fetch 方法向 /api/countries 接口发送请求，以获取用户输入值匹配的国家名称列表，并调用 renderMatchedItems 函数来更新选项列表。

示例2

以下是另一个示例，我们添加了键盘上下键和回车键的监听，并在用户选择匹配项时将其填入输入框。

<label for="province">选择省份：</label>
<input type="text" id="province" name="province" list="datalist" />

<datalist id="datalist"></datalist>

const inputEl = document.querySelector('#province');
const datalistEl = document.querySelector('#datalist');

let currentActiveIndex = -1;

inputEl.addEventListener('input', e => {
  const userInput = e.target.value.trim();
  if (userInput === '') {
    return;
  }

  fetch(`/api/provinces?q=${encodeURIComponent(userInput)}`)
    .then(response => response.json())
    .then(data => {
      renderMatchedItems(data);
    });
});

inputEl.addEventListener('keydown', e => {
  const key = e.key;
  const matchedItems = Array.from(datalistEl.children);
  const len = matchedItems.length;

  if (key === 'ArrowDown') {
    // 按下下箭头键，高亮下一个选项
    currentActiveIndex++;
    if (currentActiveIndex >= len) {
      currentActiveIndex = 0;
    }
    setHighlight(matchedItems[currentActiveIndex]);
  } else if (key === 'ArrowUp') {
    // 按下上箭头键，高亮上一个选项
    currentActiveIndex--;
    if (currentActiveIndex < 0) {
      currentActiveIndex = len - 1;
    }
    setHighlight(matchedItems[currentActiveIndex]);
  } else if (key === 'Enter') {
    // 按下回车键，将选中的选项填入输入框
    const highlightedItem = datalistEl.querySelector('.highlight');
    if (highlightedItem) {
      inputEl.value = highlightedItem.value;
    }
    // 隐藏选项列表
    datalistEl.innerHTML = '';
  }
});

function renderMatchedItems(matchedItems) {
  // 清空已有的选项
  while (datalistEl.firstChild) {
    datalistEl.removeChild(datalistEl.firstChild);
  }

  // 添加匹配到的选项
  matchedItems.forEach(item => {
    const optionEl = document.createElement('option');
    optionEl.value = item.name;
    datalistEl.appendChild(optionEl);
  });
}

function setHighlight(item) {
  Array.from(datalistEl.children).forEach(el => {
    el.classList.remove('highlight');
  });
  if (item) {
    item.classList.add('highlight');
  }
}

以上代码中，我们新增了对 keydown 事件的监听，并实现了上下箭头和回车键的响应逻辑。setHighlight 函数用来设置被高亮的选项；currentActiveIndex 用来标记当前高亮的选项。