自动完成组件通过监听输入事件过滤数据并显示匹配建议。首先创建输入框和隐藏的下拉列表，使用CSS定位与样式控制外观；JavaScript定义数据源，实时匹配用户输入并动态渲染建议项，支持点击选中和外部点击关闭。可扩展异步加载、键盘导航、高亮匹配及防抖优化。
自动完成组件（Autocomplete）是一种常见的UI功能，用户在输入时会看到匹配的建议列表。下面是一个使用原生JavaScript实现的简单自动完成组件，不依赖任何框架或库。
基本结构与HTML
先定义一个输入框和一个用于显示建议的下拉列表容器：
样式设计（CSS）
为了让组件看起来更清晰，添加一些基础样式：
.autocomplete { position: relative; width: 300px;}#searchInput { width: 100%; padding: 10px; font-size: 16px; border: 1px solid #ccc; border-radius: 4px;}.suggestions-list { position: absolute; top: 100%; left: 0; right: 0; margin: 0; padding: 0; list-style: none; border: 1px solid #ddd; border-top: none; max-height: 200px; overflow-y: auto; background: white; z-index: 10; display: none;}.suggestions-list.visible { display: block;}.suggestions-list li { padding: 10px; cursor: pointer;}.suggestions-list li:hover { background-color: #f0f0f0;}
JavaScript逻辑实现
接下来是核心部分：监听输入事件，过滤数据并显示建议。
立即学习“Java免费学习笔记（深入）”；
// 建议数据源const data = [ "JavaScript", "Java", "Python", "PHP", "Perl", "C++", "C#", "Go", "Ruby", "Swift", "Kotlin"];const input = document.getElementById("searchInput");const suggestionsList = document.getElementById("suggestions");// 渲染建议项function renderSuggestions(matches) { suggestionsList.innerHTML = ''; if (matches.length === 0) { suggestionsList.classList.remove('visible'); return; } matches.forEach(item => { const li = document.createElement("li"); li.textContent = item; li.addEventListener("click", () => { input.value = item; suggestionsList.classList.remove('visible'); }); suggestionsList.appendChild(li); }); suggestionsList.classList.add('visible');}// 获取匹配项function getMatches(inputValue) { return data.filter(item => item.toLowerCase().includes(inputValue.toLowerCase()) );}// 输入事件处理input.addEventListener("input", function () { const value = this.value.trim(); if (value === "") { suggestionsList.classList.remove('visible'); return; } const matches = getMatches(value); renderSuggestions(matches);});// 点击外部关闭建议列表document.addEventListener("click", function (e) { if (e.target !== input && e.target !== suggestionsList) { suggestionsList.classList.remove('visible'); }});
功能扩展建议
这个基础版本可以进一步增强：
异步支持：将data替换为fetch请求，从后端获取建议数据 键盘导航：支持上下键选择，回车确认 高亮匹配文字：在建议中加粗显示用户输入的部分 防抖机制：避免频繁触发搜索，提升性能基本上就这些，不复杂但容易忽略细节。
以上就是使用JavaScript实现一个简单的自动完成组件_javascript UI组件的详细内容，更多请关注php中文网其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1536274.html
微信扫一扫 
支付宝扫一扫 
