如何让文章的搜索栏工作HTML/CSS

<form id="search-form" action="#" method="get">
  <input type="text" id="search-input" placeholder="搜索文章...">
  <button type="submit" id="search-button">搜索</button>
</form>

#search-form {
  display: flex;
  align-items: center;
}

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

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

document.getElementById("search-form").addEventListener("submit", function(event) {
  event.preventDefault(); // 阻止表单提交的默认行为
  var searchKeyword = document.getElementById("search-input").value;
  // 执行搜索操作，例如发送搜索请求到服务器或在页面中过滤显示相关文章
});