使用J*aScript实现一个简单的自动完成组件_j*ascript UI组件

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

使用JaScript实现一个简单的自动完成组件_jascript UI组件

2025-11-06

浏览次数：次

返回列表

自动完成组件通过监听输入事件过滤数据并显示匹配建议。首先创建输入框和隐藏的下拉列表，使用CSS定位与样式控制外观；J*aScript定义数据源，实时匹配用户输入并动态渲染建议项，支持点击选中和外部点击关闭。可扩展异步加载、键盘导航、高亮匹配及防抖优化。

使用javascript实现一个简单的自动完成组件_javascript ui组件

自动完成组件（Autocomplete）是一种常见的UI功能，用户在输入时会看到匹配的建议列表。下面是一个使用原生J*aScript实现的简单自动完成组件，不依赖任何框架或库。

基本结构与HTML

先定义一个输入框和一个用于显示建议的下拉列表容器：

<div class="autocomplete">
  <input type="text" id="searchInput" placeholder="输入内容...">
  <ul id="suggestions" class="suggestions-list"></ul>
</div>

样式设计（CSS）

为了让组件看起来更清晰，添加一些基础样式：

J*ashop

J*ashop是基于 J*a技术构建的开源网店系统，其特色是组件机制和模板引擎让扩展变得简单，可有第三方组件可供选择，降低二次开发成本。同时 J*ashop推出 “ 第三方开发者合作共赢计划 ”，依托计时软件有效计算开发费用，期望在实现双赢的基础上走出我们国人自己开源模式，详见：J*ashop第三方开发者合作共赢计划J*ashop v3.0 升级日志：一、机制1. 完善组件机制，更易

0 查看详情 Javashop

.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;
}

J*aScript逻辑实现

接下来是核心部分：监听输入事件，过滤数据并显示建议。

// 建议数据源
const data = [
  "J*aScript",
  "J*a",
  "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');
  }
});