用代码写一个实时搜索功能

这里提供一个用原生JavaScript实现的简单实时搜索功能：

HTML代码：

<input type="text" id="search-input" placeholder="请输入搜索关键字">
<ul id="search-results"></ul>

JavaScript代码：

const searchInput = document.getElementById('search-input');
const searchResults = document.getElementById('search-results');

searchInput.addEventListener('input', function() {
  const query = this.value.toLowerCase();
  const results = [];

  // 模拟数据
  const data = ['apple', 'banana', 'cherry', 'date', 'elderberry', 'fig'];

  // 遍历数据，如果包含搜索关键字则加入结果数组
  for (let i = 0; i < data.length; i++) {
    const item = data[i].toLowerCase();
    if (item.includes(query)) {
      results.push(data[i]);
    }
  }

  // 清空搜索结果
  searchResults.innerHTML = '';

  // 如果有结果则显示，否则显示“无结果”
  if (results.length > 0) {
    for (let i = 0; i < results.length; i++) {
      const li = document.createElement('li');
      li.textContent = results[i];
      searchResults.appendChild(li);
    }
  } else {
    const li = document.createElement('li');
    li.textContent = '无结果';
    searchResults.appendChild(li);
  }
});

代码解释：

1. 获取输入框和搜索结果容器的DOM元素。

2. 给输入框添加input事件监听器，每次输入内容时触发搜索。

3. 获取输入框的值并转换为小写字母，作为搜索关键字。

4. 遍历模拟数据，如果数据项包含搜索关键字则加入结果数组。

5. 清空搜索结果容器的内容。

6. 如果有搜索结果则遍历结果数组，创建li元素并添加到搜索结果容器中，显示搜索结果。

7. 如果没有搜索结果则创建一个li元素，显示“无结果”。

这个实现只是一个简单的演示，实际应用中可能需要使用更复杂的搜索算法和数据结构，以及对输入的值进行过滤和验证。