通过搜索图标扩展搜索栏，并使用Javascript在单击时显示关闭图标

的功能可以通过以下步骤实现：

首先，需要在HTML中创建一个搜索栏和一个搜索图标，并为它们分配相应的ID和类名。例如：

<input type="text" id="search-bar" class="search-bar">
<i class="search-icon" id="search-icon"></i>

接下来，在CSS中设置搜索图标的样式，并隐藏关闭图标。例如：

.search-icon {
  background-image: url("search-icon.png");
  width: 20px;
  height: 20px;
  background-size: cover;
  cursor: pointer;
}

.close-icon {
  background-image: url("close-icon.png");
  width: 20px;
  height: 20px;
  background-size: cover;
  cursor: pointer;
  display: none;
}

在Javascript中，获取搜索栏和搜索图标的元素，并为搜索图标添加单击事件监听器。当单击搜索图标时，显示关闭图标，并将搜索栏的值清空。例如：

var searchBar = document.getElementById("search-bar");
var searchIcon = document.getElementById("search-icon");

searchIcon.addEventListener("click", function() {
  searchBar.value = "";
  searchIcon.style.display = "none";
});

最后，为搜索栏添加输入事件监听器，当搜索栏中有输入时，显示关闭图标。例如：

searchBar.addEventListener("input", function() {
  if (searchBar.value !== "") {
    searchIcon.style.display = "block";
  } else {
    searchIcon.style.display = "none";
  }
});

通过以上步骤，就可以实现通过搜索图标扩展搜索栏，并使用Javascript在单击时显示关闭图标的功能。这种功能常见于各类网站和应用的搜索栏中，提供更好的用户体验和交互性。

腾讯云相关产品中，可以使用 COS（对象存储）来存储搜索图标和关闭图标的图片文件，使用 CDN（内容分发网络）来加速图标的加载，使用 VPC（虚拟私有云）来保护搜索栏和图标的安全，使用 SCF（云函数）来处理搜索栏的相关逻辑。具体产品介绍和链接如下：