JS实用案例之输入智能提示(打字机输出效果)

下面是对“JS实用案例之输入智能提示(打字机输出效果)”进行详细讲解的完整攻略。

1. 概述

“JS实用案例之输入智能提示(打字机输出效果)”是一个JS实用案例，它通过在用户输入时展示智能提示等方法，提高了网站的用户交互体验。本文将介绍该案例的详细实现方法。

2. 技术要点

• JavaScript
• HTML
• CSS

3. 实现过程

3.1. 编写HTML和CSS

首先，在HTML中添加一个输入框和一个用于展示智能提示的ul标签：

<input type="text" id="keyword" placeholder="请输入搜索关键词...">
<ul id="search-suggest"></ul>

然后，在CSS中对ul标签进行一些样式调整：

#search-suggest {
  border: 1px solid #ccc;
  padding: 0;
  margin: 0;
  background-color: #fff;
  list-style: none;
  position: absolute;
  left: 0;
  top: 34px;
  width: 300px;
  max-height: 150px;
  overflow-y: auto;
  z-index: 100;
  display: none;
}

#search-suggest li {
  padding: 10px;
  cursor: pointer;
}

#search-suggest li:hover {
  background-color: #f5f5f5;
}

3.2. 实现智能提示

接下来，我们需要实现输入框的智能提示功能。输入框在每次输入的时候，都会触发keydown事件，在事件处理函数中，我们监听按键的值，如果是拉丁字母或输入空格、删除键，在触发动态获取数据并进行匹配操作，然后将匹配结果展示在下拉列表中：

const suggest = document.querySelector("#search-suggest");
const keywordInput = document.querySelector("#keyword");

keywordInput.addEventListener("keydown", e => {
  const key = e.key;
  if (/[a-zA-Z0-9\s]/.test(key)) {
    suggest.style.display = "block";
    const keyword = keywordInput.value;
    if (keyword) {
      fetchData(keyword).then(matches => {
        renderMatches(matches);
      });
    }
  }
});

// 根据输入的关键词获取数据
function fetchData(keyword) {
  return fetch(`https://api.cdnjs.com/libraries?search=${keyword}`)
    .then(response => {
      return response.json();
    })
    .then(data => {
      return data.results.map(item => item.name);
    });
}

// 渲染匹配结果
function renderMatches(matches) {
  suggest.innerHTML = "";
  for (let match of matches) {
    const li = document.createElement("li");
    li.textContent = match;
    suggest.appendChild(li);
  }
}

3.3. 实现打字机输出效果

最后，我们需要实现在用户选中下拉列表中的某个选项时，展示选项的打字机输出效果。实现方法是：

在智能提示下拉列表中添加一个 mouseover 事件监听器，当鼠标在某一匹配结果上移动时，将该匹配结果存储在一个变量中，当用户选中该项时，将该项插入到输入框中，并展示打字机输出效果：

let selectedMatch = "";

suggest.addEventListener("mouseover", e => {
  if (e.target.tagName.toLowerCase() === "li") {
    selectedMatch = e.target.textContent;
  }
});

suggest.addEventListener("click", e => {
  if (e.target.tagName.toLowerCase() === "li") {
    keywordInput.value = selectedMatch;
    suggest.style.display = "none";
    typeText(selectedMatch);
  }
});

// 打字机输出效果
function typeText(text) {
  const len = text.length;
  let i = 0;
  const intervalId = setInterval(() => {
    if (i >= len) {
      clearInterval(intervalId);
    } else {
      keywordInput.value = text.slice(0, ++i);
    }
  }, 100);
}

4. 示例说明

4.1. 示例一：为搜索框添加智能提示

我们有一个搜索框，需要为其添加智能提示功能。用户可以在搜索框中输入关键词，系统会在后台发送请求，根据关键词搜索目标数据并返回匹配结果，在下拉列表中展示匹配结果。当用户选中某个匹配结果时，系统会将匹配结果展示在搜索框内，并使用打字机输出效果展示出来。

4.2. 示例二：添加公共库搜索功能

我们的网站需要一个公共库搜索功能，可以让用户搜索主流的前端库。在输入框中输入关键词时，系统展示与关键词匹配的前端库名称，并支持打字机输出效果。用户在选中某个匹配结果后，会重定向到该库的官网。