如何在第二次搜索点击时用新数据替换已有的数据列表？

在前端开发中，可以通过以下步骤来实现在第二次搜索点击时用新数据替换已有的数据列表：

创建一个空的数据列表容器，用于存储搜索结果的数据。
监听搜索按钮的点击事件。
在点击事件中，获取用户输入的搜索关键字。
发起异步请求，将搜索关键字发送到后端进行处理。
后端根据搜索关键字进行数据查询，并将查询结果返回给前端。
前端接收到查询结果后，将结果存储到数据列表容器中。
清空已有的数据列表，将新的数据列表渲染到页面上。

以下是一个示例代码，使用JavaScript和jQuery库实现上述功能：

// HTML部分
<input type="text" id="searchInput">
<button id="searchButton">搜索</button>
<ul id="dataList"></ul>

// JavaScript部分
$(document).ready(function() {
  // 创建一个空的数据列表容器
  var dataList = [];

  // 监听搜索按钮的点击事件
  $('#searchButton').click(function() {
    // 获取用户输入的搜索关键字
    var keyword = $('#searchInput').val();

    // 发起异步请求，将搜索关键字发送到后端进行处理
    $.ajax({
      url: '/search',
      method: 'GET',
      data: { keyword: keyword },
      success: function(response) {
        // 后端返回的查询结果
        var searchResult = response.data;

        // 将查询结果存储到数据列表容器中
        dataList = searchResult;

        // 清空已有的数据列表
        $('#dataList').empty();

        // 将新的数据列表渲染到页面上
        for (var i = 0; i < dataList.length; i++) {
          $('#dataList').append('<li>' + dataList[i] + '</li>');
        }
      },
      error: function(error) {
        console.log(error);
      }
    });
  });
});

这个示例代码中，通过监听搜索按钮的点击事件，在点击事件中获取用户输入的搜索关键字，并发起异步请求将关键字发送到后端进行处理。后端根据关键字进行数据查询，并将查询结果返回给前端。前端接收到查询结果后，将结果存储到数据列表容器中，并将新的数据列表渲染到页面上。每次点击搜索按钮时，都会用新的数据替换已有的数据列表。