如何配置布局，以便在输入搜索下方的列表视图上输出输出

<div class="container">
  <input type="text" id="searchInput" placeholder="输入搜索">
  <ul id="listView"></ul>
</div>

.container {
  position: relative;
}

#listView {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background-color: #fff;
  border: 1px solid #ccc;
  list-style: none;
  padding: 0;
  margin: 0;
  display: none;
}

#listView li {
  padding: 10px;
  cursor: pointer;
}

#listView li:hover {
  background-color: #f0f0f0;
}

const searchInput = document.getElementById('searchInput');
const listView = document.getElementById('listView');

searchInput.addEventListener('input', function() {
  const keyword = this.value.trim();
  
  // 根据输入的关键字进行搜索，获取匹配的结果列表
  const searchResults = search(keyword);
  
  // 清空列表视图
  listView.innerHTML = '';
  
  // 如果有匹配的结果，则显示列表视图并添加结果项
  if (searchResults.length > 0) {
    listView.style.display = 'block';
    
    searchResults.forEach(function(result) {
      const li = document.createElement('li');
      li.textContent = result;
      
      li.addEventListener('click', function() {
        // 点击结果项后的操作，例如填充搜索框、跳转页面等
        searchInput.value = result;
        listView.style.display = 'none';
      });
      
      listView.appendChild(li);
    });
  } else {
    listView.style.display = 'none';
  }
});

// 模拟搜索函数，根据输入的关键字返回匹配的结果列表
function search(keyword) {
  // 这里可以根据实际需求进行搜索逻辑的实现
  // 返回一个包含匹配结果的数组
  return ['结果1', '结果2', '结果3'];
}