当前位置：首页 > JavaScript

js实现联想输入

2026-03-01 06:18:43JavaScript

实现联想输入的基本思路

联想输入（即自动补全或搜索建议）的核心是通过监听用户输入，实时匹配数据并展示匹配结果。以下是一个基于JavaScript的实现方案：

监听输入事件

使用input事件监听用户输入，获取输入框的值：

const inputElement = document.getElementById('search-input');
inputElement.addEventListener('input', handleInput);

匹配数据逻辑

定义匹配函数，根据输入内容过滤数据源（假设数据源为数组）：

js实现联想输入

function filterSuggestions(input, data) {
  return data.filter(item => 
    item.toLowerCase().includes(input.toLowerCase())
  );
}

展示匹配结果

创建DOM元素动态显示匹配结果：

function displaySuggestions(suggestions) {
  const container = document.getElementById('suggestions-container');
  container.innerHTML = '';

  suggestions.forEach(suggestion => {
    const div = document.createElement('div');
    div.textContent = suggestion;
    div.addEventListener('click', () => {
      document.getElementById('search-input').value = suggestion;
      container.innerHTML = '';
    });
    container.appendChild(div);
  });
}

防抖优化

为避免频繁触发搜索，需添加防抖函数：

js实现联想输入

function debounce(func, delay) {
  let timeoutId;
  return function(...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, args), delay);
  };
}

const debouncedHandleInput = debounce(handleInput, 300);
inputElement.addEventListener('input', debouncedHandleInput);

完整示例代码

<input type="text" id="search-input" placeholder="输入搜索内容">
<div id="suggestions-container"></div>

<script>
  const data = ['苹果', '香蕉', '橙子', '西瓜', '芒果'];
  const inputElement = document.getElementById('search-input');

  function handleInput() {
    const input = inputElement.value.trim();
    const suggestions = filterSuggestions(input, data);
    displaySuggestions(suggestions);
  }

  function filterSuggestions(input, data) {
    return data.filter(item => 
      item.toLowerCase().includes(input.toLowerCase())
    );
  }

  function displaySuggestions(suggestions) {
    const container = document.getElementById('suggestions-container');
    container.innerHTML = '';

    suggestions.forEach(suggestion => {
      const div = document.createElement('div');
      div.textContent = suggestion;
      div.addEventListener('click', () => {
        inputElement.value = suggestion;
        container.innerHTML = '';
      });
      container.appendChild(div);
    });
  }

  function debounce(func, delay) {
    let timeoutId;
    return function(...args) {
      clearTimeout(timeoutId);
      timeoutId = setTimeout(() => func.apply(this, args), delay);
    };
  }

  const debouncedHandleInput = debounce(handleInput, 300);
  inputElement.addEventListener('input', debouncedHandleInput);
</script>

进阶优化方向

数据源获取
可改为从API异步获取数据：

async function fetchSuggestions(query) {
  const response = await fetch(`/api/suggestions?q=${query}`);
  return await response.json();
}

样式优化
为建议列表添加CSS样式，提升用户体验：

#suggestions-container {
  border: 1px solid #ccc;
  max-height: 200px;
  overflow-y: auto;
}

#suggestions-container div {
  padding: 8px;
  cursor: pointer;
}

#suggestions-container div:hover {
  background-color: #f0f0f0;
}

键盘导航
添加键盘上下键选择功能：

let currentSelection = -1;

inputElement.addEventListener('keydown', (e) => {
  const items = document.querySelectorAll('#suggestions-container div');

  if (e.key === 'ArrowDown') {
    currentSelection = Math.min(currentSelection + 1, items.length - 1);
    updateSelection(items);
  } else if (e.key === 'ArrowUp') {
    currentSelection = Math.max(currentSelection - 1, -1);
    updateSelection(items);
  } else if (e.key === 'Enter' && currentSelection >= 0) {
    inputElement.value = items[currentSelection].textContent;
    document.getElementById('suggestions-container').innerHTML = '';
  }
});

function updateSelection(items) {
  items.forEach((item, index) => {
    item.style.backgroundColor = index === currentSelection ? '#ddd' : '';
  });
}

标签: js