用js实现输入提示（自动完成）("JavaScript 实现输入提示与自动完成功能")

原创

ithorizon 7个月前 (10-19) 阅读数 30 #后端开发

JavaScript 实现输入提示与自动完圆满能

在Web开发中，输入提示（也称为自动完成）功能可以大大减成本时间用户体验。本文将介绍怎样使用JavaScript实现一个单纯的输入提示与自动完圆满能。我们将从基本概念开端，逐步深入，最终实现一个完整的示例。

一、基本概念

输入提示与自动完圆满能的核心是监听用户输入，并通过输入内容动态显示提示列表。以下是我们需要关注的几个关键点：

监听输入框的输入事件

通过输入内容过滤数据源

显示提示列表

处理用户选择提示的操作

二、实现步骤

下面我们将按照以下步骤实现输入提示与自动完圆满能：

创建HTML页面

编写CSS样式

编写JavaScript代码

三、创建HTML页面

首先，我们需要创建一个HTML页面，包含一个输入框和用于显示提示列表的容器。

输入提示与自动完圆满能示例

四、编写CSS样式

接下来，我们需要编写一些CSS样式来美化输入框和提示列表。


.autocomplete-container {
    position: relative;
    display: inline-block;
}
.autocomplete-input {
    border: 1px solid #ccc;
    padding: 10px;
    font-size: 16px;
}
.autocomplete-items {
    position: absolute;
    border: 1px solid #ccc;
    border-top: none;
    z-index: 99;
    top: 100%;
    left: 0;
    right: 0;
    background-color: #fff;
}
.autocomplete-item {
    padding: 10px;
    cursor: pointer;
    background-color: #fff;
    border-bottom: 1px solid #ccc;
}
.autocomplete-item:hover {
    background-color: #f1f1f1;
}

五、编写JavaScript代码

最后，我们编写JavaScript代码来实现输入提示与自动完圆满能。


// 定义一个数据源
const dataSource = ["Apple", "Banana", "Cherry", "Date", "Fig", "Grape", "Kiwi"];
// 获取输入框和提示列表元素
const inputElement = document.getElementById("autocomplete-input");
const listElement = document.getElementById("autocomplete-list");
// 监听输入框的输入事件
inputElement.addEventListener("input", function() {
    const inputVal = inputElement.value.toLowerCase();
    // 清空提示列表
    listElement.innerHTML = "";
    // 如果输入框为空，不显示提示列表
    if (inputVal.length === 0) {
        return;
    }
    // 过滤数据源
    const filteredData = dataSource.filter(function(item) {
        return item.toLowerCase().startsWith(inputVal);
    });
    // 创建提示列表
    filteredData.forEach(function(item) {
        const listItem = document.createElement("div");
        listItem.classList.add("autocomplete-item");
        listItem.textContent = item;
        listItem.addEventListener("click", function() {
            inputElement.value = item;
            listElement.innerHTML = "";
        });
        listElement.appendChild(listItem);
    });
});
// 监听点击事件，隐藏提示列表
document.addEventListener("click", function(event) {
    if (event.target !== inputElement) {
        listElement.innerHTML = "";
    }
});