使用Javascript实现简单的搜索功能

<input type="text" id="searchInput" placeholder="输入关键字">
<button id="searchButton">搜索</button>
<div id="searchResults"></div>

// 获取页面元素
var searchInput = document.getElementById('searchInput');
var searchButton = document.getElementById('searchButton');
var searchResults = document.getElementById('searchResults');

// 监听搜索按钮点击事件
searchButton.addEventListener('click', function() {
  var keyword = searchInput.value.trim(); // 获取输入的关键字并去除首尾空格
  if (keyword !== '') {
    search(keyword); // 调用搜索函数
  }
});

// 搜索函数
function search(keyword) {
  // 发送搜索请求，这里可以使用Ajax或者fetch API发送请求到后端进行搜索
  // 假设搜索结果是一个数组，每个元素是一个对象，包含title和url属性
  var results = [
    { title: '搜索结果1', url: 'https://example.com/result1' },
    { title: '搜索结果2', url: 'https://example.com/result2' },
    { title: '搜索结果3', url: 'https://example.com/result3' }
  ];

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

  // 遍历搜索结果数组，生成搜索结果列表
  results.forEach(function(result) {
    // 创建结果项的HTML元素
    var resultItem = document.createElement('div');
    var resultLink = document.createElement('a');
    resultLink.href = result.url;
    resultLink.textContent = result.title;
    resultItem.appendChild(resultLink);

    // 将结果项添加到搜索结果列表中
    searchResults.appendChild(resultItem);
  });
}