如何使用JavaScript在页面上创建简单的自动完成功能？

文章标签： html css JavaScript

2023-05-08 19:53:20 发布

JavaScript实现页面自动完成功能

自动完成是一种常见的交互式Web应用程序功能，它可以帮助用户更快地找到所需的信息。本文将介绍如何使用JavaScript在网页上创建一个简单的自动完成功能。

HTML结构

首先，我们需要一个输入框，用于用户输入要查找的内容，以及一个下拉列表，用于显示匹配的结果。HTML代码如下：

<input type="text" id="autocomplete-input">
<ul id="autocomplete-list"></ul>

JavaScript代码

接下来，我们需要编写JavaScript代码来实现自动完成功能。我们可以使用keyup事件来监听文本框的输入，然后根据输入内容动态生成下拉列表。

const input = document.getElementById('autocomplete-input');
const list = document.getElementById('autocomplete-list');

input.addEventListener('keyup', function() {
  const inputValue = input.value;
  list.innerHTML = '';

  // TODO: 根据输入内容动态生成下拉列表
});

在keyup事件处理程序中，我们获取输入框的值，并清空下拉列表。接下来，我们需要根据输入内容动态生成下拉列表。可以使用Array.filter()方法来过滤出匹配的结果，然后使用Array.map()方法将结果转换为<li>元素，最后将它们添加到下拉列表中。

const fruits = ['Apple', 'Banana', 'Cherry', 'Date', 'Fig', 'Grape'];

input.addEventListener('keyup', function() {
  const inputValue = input.value;
  list.innerHTML = '';

  const matches = fruits.filter(function(fruit) {
    return fruit.toLowerCase().startsWith(inputValue.toLowerCase());
  });

  const liElements = matches.map(function(match) {
    const li = document.createElement('li');
    li.textContent = match;
    return li;
  });

  liElements.forEach(function(li) {
    list.appendChild(li);
  });
});

在上面的代码中，我们使用Array.filter()方法过滤出以输入内容开头的水果名称，然后使用Array.map()方法将它们转换为<li>元素。最后，我们将所有<li>元素添加到下拉列表中。

高亮关键词

如果我们想要高亮下拉列表中匹配的关键词，可以使用正则表达式来替换匹配的文本。例如，我们可以将匹配的文本用<strong>标签包裹起来，然后将其添加到<li>元素中。

const fruits = ['Apple', 'Banana', 'Cherry', 'Date', 'Fig', 'Grape'];

input.addEventListener('keyup', function() {
  const inputValue = input.value;
  list.innerHTML = '';

  const matches = fruits.filter(function(fruit) {
    return fruit.toLowerCase().startsWith(inputValue.toLowerCase());
  });

  const liElements = matches.map(function(match) {
    const li = document.createElement('li');
    const regex = new RegExp(`(${inputValue})`, 'gi');
    const text = match.replace(regex, '<strong>$1</strong>');
    li.innerHTML = text;
    return li;
  });

  liElements.forEach(function(li) {
    list.appendChild(li);
  });
});

在上面的代码中，我们使用正则表达式来替换匹配的文本，然后将其添加到<li>元素中。最后，我们将所有<li>元素添加到下拉列表中。