JavaScript实现带自动提示的文本框效果代码

下面是详细的JavaScript实现带自动提示的文本框效果代码攻略：

准备工作

在实现带自动提示的文本框效果之前，需要准备以下工作：

• 一个文本框，用于用户输入文本。
• 一个提示框，用于显示自动提示的信息。
• 一份数据源，用于提取需要自动提示的信息。

实现过程

1. 实现文本框输入事件的监听

首先，需要监听文本框的输入事件，当用户输入文本时，我们需要从数据源中提取自动提示信息并显示在提示框中。

示例代码:

let input = document.querySelector("#text-input");
let hintBox = document.querySelector("#hint-box");

input.addEventListener("input", function(event) {
  let inputValue = event.target.value;
  let dataList = getDataList(inputValue); // 从数据源中获取符合条件的提示信息列表
  showHintList(dataList, hintBox); // 将提示信息列表显示到提示框中
});

2. 实现数据源的筛选

在监听到文本框输入事件之后，需要从数据源中获取符合条件的提示信息列表。例如，用户在文本框输入“ab”时，需要从数据源中提取出以“ab”开头的信息列表。

示例代码:

function getDataList(keyword) {
  let dataList = []; // 存储符合条件的提示信息

  for (let i = 0; i < dataSource.length; i++) {
    let dataItem = dataSource[i];

    if (dataItem.startsWith(keyword)) {
      dataList.push(dataItem);
    }
  }

  return dataList;
}

3. 实现提示框的显示

当获取到符合条件的提示信息列表之后，需要将其显示在提示框中。

示例代码:

function showHintList(dataList, hintBox) {
  hintBox.innerHTML = ""; // 清空提示框内容

  for (let i = 0; i < dataList.length; i++) {
    let hintItem = document.createElement("li"); // 创建提示信息项
    hintItem.innerHTML = dataList[i];
    hintBox.appendChild(hintItem);
  }
}

4. 实现提示框点击事件的监听

用户在点击提示框中的某个提示信息时，需要将该提示信息填入文本框中。

示例代码:

hintBox.addEventListener("click", function(event) {
  if (event.target.tagName.toLowerCase() === "li") {
    input.value = event.target.innerText;
    hintBox.innerHTML = ""; // 清空提示框内容
  }
});

示例说明

这里提供两个示例说明，分别是：

示例一：从本地文件中读取数据

let input = document.querySelector("#text-input");
let hintBox = document.querySelector("#hint-box");

let dataSource = [];

fetch("data.txt")
  .then(response => response.text())
  .then(data => {
    dataSource = data.split("\n"); // 将数据按行分割成数组
  });

input.addEventListener("input", function(event) {
  let inputValue = event.target.value;
  let dataList = getDataList(inputValue);
  showHintList(dataList, hintBox);
});

function getDataList(keyword) {
  let dataList = [];

  for (let i = 0; i < dataSource.length; i++) {
    let dataItem = dataSource[i];

    if (dataItem.startsWith(keyword)) {
      dataList.push(dataItem);
    }
  }

  return dataList;
}

function showHintList(dataList, hintBox) {
  hintBox.innerHTML = "";

  for (let i = 0; i < dataList.length; i++) {
    let hintItem = document.createElement("li");
    hintItem.innerHTML = dataList[i];
    hintBox.appendChild(hintItem);
  }
}

hintBox.addEventListener("click", function(event) {
  if (event.target.tagName.toLowerCase() === "li") {
    input.value = event.target.innerText;
    hintBox.innerHTML = "";
  }
});

以上代码从本地文件data.txt中读取数据作为数据源，用户在文本框中输入字符后会自动从数据源中筛选符合条件的提示信息，并显示在提示框中。

示例二：联想搜索

let input = document.querySelector("#text-input");
let hintBox = document.querySelector("#hint-box");

let dataSource = [];

fetch("https://api.github.com/users/WeiChiaChang/repos")
  .then(response => response.json())
  .then(data => {
    dataSource = data.map(item => item.name); // 从API返回数据中提取出每个仓库的名称作为数据源
  });

input.addEventListener("input", function(event) {
  let inputValue = event.target.value;
  let dataList = getDataList(inputValue);
  showHintList(dataList, hintBox);
});

function getDataList(keyword) {
  let dataList = [];

  for (let i = 0; i < dataSource.length; i++) {
    let dataItem = dataSource[i];

    if (dataItem.includes(keyword)) {
      dataList.push(dataItem);
    }
  }

  return dataList;
}

function showHintList(dataList, hintBox) {
  hintBox.innerHTML = "";

  for (let i = 0; i < dataList.length; i++) {
    let hintItem = document.createElement("li");
    hintItem.innerHTML = dataList[i];
    hintBox.appendChild(hintItem);
  }
}

hintBox.addEventListener("click", function(event) {
  if (event.target.tagName.toLowerCase() === "li") {
    input.value = event.target.innerText;
    hintBox.innerHTML = "";
  }
});

以上代码从github的开发者API接口中获取仓库名称作为数据源，用户在输入时会自动从数据源中筛选包含输入字符的相关信息，并显示在提示框中，以实现联想搜索功能。

总结

在使用js实现自动提示的文本框效果时，需要注意以下几个点：

• 文本框中输入事件的监听。
• 数据源的提取与筛选。
• 提示框的显示与样式调整。
• 提示框中提示信息的点击事件监听。
• 跨域请求的处理问题。