如何制作功能物化搜索栏

<div class="search-bar">
  <input type="text" id="search-input" placeholder="请输入关键词">
  <button id="search-btn">搜索</button>
</div>

.search-bar {
  display: flex;
  align-items: center;
}

#search-input {
  width: 200px;
  height: 30px;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

#search-btn {
  margin-left: 10px;
  padding: 5px 10px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

#search-btn:hover {
  background-color: #0056b3;
}

var searchBtn = document.getElementById('search-btn');
var searchInput = document.getElementById('search-input');

searchBtn.addEventListener('click', function() {
  var keyword = searchInput.value;
  // 执行搜索操作，例如发送搜索请求到后端或展示搜索结果
  console.log('搜索关键词：', keyword);
});