输入类型搜索删除 x - CSS

在编写Web应用程序时，删除操作是一个非常常见的需求。通常情况下，我们都会使用一个按钮或一个链接来执行删除操作。但是，如果你想让你的用户可以在输入框中输入一个值并从列表中删除对应的项，该怎么做呢？

在CSS中，我们可以使用一个组合效果来实现这个功能。我们可以使用一个输入框，用户可以在其中输入要删除的值。然后，我们可以使用CSS选择器来确定该元素，并使用CSS中的display属性来将其隐藏或删除。

HTML部分

在HTML中，我们需要一个用于输入删除值的输入框和一个用于展示或列表的容器。下面是一个简单的HTML代码片段。

<div id="container">
 <ul>
   <li>Item 1 <span>x</span></li>
   <li>Item 2 <span>x</span></li>
   <li>Item 3 <span>x</span></li>
   <li>Item 4 <span>x</span></li>
   <li>Item 5 <span>x</span></li>
 </ul>
 <input type="text" id="searchBox" placeholder="请输入要删除的值">
</div>

可以看到，我们有一个用于输入搜索值的输入框和一个用于存放列表项的容器。每个列表项都有一个x符号，用户可以点击它来删除该项。

CSS部分

下面是CSS代码片段，其中包含了我们在HTML中所使用的各种元素。

#container ul li {
  position: relative;
  padding: 10px;
}

#container ul li span {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
}

#searchBox {
  margin-top: 20px;
  padding: 5px 10px;
}

首先，我们设置了列表项的样式。每个列表项都有一个相对位置，内部有一些填充。此外，每个列表项中都有一个绝对定位的span元素，用于显示x号。该元素放在列表项右上角，方便用户点击。

然后，我们添加了一个用于输入删除值的输入框。该元素被放置在列表项之下。

JavaScript部分

要实现搜索删除的功能，我们使用JavaScript来处理输入框中输入值的逻辑。具体来说，我们通过查询输入框中的值来决定哪些列表项应该隐藏或删除。

首先，我们需要在输入框中添加一个事件侦听器，该侦听器在键盘按下时被触发。每当用户输入一些内容时，我们都需要搜索列表中是否有该项。如果找到了该项，则将其隐藏或删除。

下面是我们要使用的JavaScript代码：

var searchBox = document.getElementById('searchBox');

searchBox.addEventListener('keyup', function () {
  var searchTerm = searchBox.value.trim().toLowerCase();

  if (searchTerm) {
    var listItems = document.querySelectorAll('#container ul li');

    for (var i = 0; i < listItems.length; i++) {
      var text = listItems[i].textContent.toLowerCase();

      if (text.indexOf(searchTerm) > -1) {
        listItems[i].style.display = '';
      } else {
        listItems[i].style.display = 'none';
      }
    }
  } else {
    var listItems = document.querySelectorAll('#container ul li');

    for (var i = 0; i < listItems.length; i++) {
      listItems[i].style.display = '';
    }
  }
});

首先，我们获取到输入框的元素。然后，我们为该元素添加一个键盘事件侦听器，该侦听器在用户输入时将被触发。

在事件处理程序中，我们首先获取输入框中的值，然后将其转换为小写字母。接下来，我们查询所有列表项，遍历它们，并根据其文本内容判断是否与输入值匹配。只有匹配的项才会被显示，其他未匹配的项将被隐藏或删除。

如果输入框没有任何值，则将显示所有列表项。

完整代码片段

至此，我们已经完成了整个搜索删除的功能。为了帮助理解，下面是完整代码片段。

<div id="container">
  <ul>
    <li>Item 1 <span>x</span></li>
    <li>Item 2 <span>x</span></li>
    <li>Item 3 <span>x</span></li>
    <li>Item 4 <span>x</span></li>
    <li>Item 5 <span>x</span></li>
  </ul>
  <input type="text" id="searchBox" placeholder="请输入要删除的值">
</div>

<style>
  #container ul li {
    position: relative;
    padding: 10px;
  }

  #container ul li span {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
  }

  #searchBox {
    margin-top: 20px;
    padding: 5px 10px;
  }
</style>

<script>
  var searchBox = document.getElementById('searchBox');

  searchBox.addEventListener('keyup', function () {
    var searchTerm = searchBox.value.trim().toLowerCase();

    if (searchTerm) {
      var listItems = document.querySelectorAll('#container ul li');

      for (var i = 0; i < listItems.length; i++) {
        var text = listItems[i].textContent.toLowerCase();

        if (text.indexOf(searchTerm) > -1) {
          listItems[i].style.display = '';
        } else {
		  listItems[i].style.display = 'none';
        }
      }
    } else {
      var listItems = document.querySelectorAll('#container ul li');

      for (var i = 0; i < listItems.length; i++) {
        listItems[i].style.display = '';
      }
    }
  });
</script>

输出将是一个完美的交互式列表，用户可以搜索要删除的值并从列表中删除它们。